Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Animated notifications
<!-- Section 1 - Notification-->
<section class="section-notification">
<ul class="nav">
<li><i class="material-icons">home</i></li>
<li><i class="material-icons">search</i></li>
<li class="is-active"><i class="material-icons">star
<ul class="notifications">
<li><i class="material-icons">remove_red_eye</i><span>9</span></li>
<li><i class="material-icons">comment</i><span>4</span></li>
<li><i class="material-icons">account_circle</i><span>6</span></li>
</ul>
</i>
</li>
<li><i class="material-icons">face</i></li>
</ul>
</section>
<!-- Section 2 - Alert-->
<section class="section-alert">
<div class="website">
<div class="title-block">
<div class="title"><i class="material-icons site-icon">face</i>
<!--span Obviously a website--><span>Many faces of murray</span>
<hr/>
</div>
</div>
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="alert-element">
<div class="icon"><i class="material-icons">notifications</i></div>
<div class="text"><span>You clicked a Murray!!</span></div>
</div>
</div>
</section>
<!-- Section 3 - Modal-->
<section class="section-modal">
<div class="profile"><img src="http://www.fillmurray.com/130/130" />
<div class="text">
<div class="name">Bill Murray</div>
<div class="meta">Click me!</div>
</div>
</div>
<div class="overlay">
<div class="modal">
<div class="title">You clicked a Murray!</div>
<div class="body">
<div class="img" style="background-image: url(http://www.fillmurray.com/180/180)"></div>
<div class="text">
<p>Bill Murray loves you, and sends his most sincere regards.</p>
<p>He also asks that you simply keep on hacking.</p>
</div>
</div>
</div>
</div>
</section>
$('.nav li').click(function(){
$(this).addClass('is-active').siblings().removeClass('is-active');
});
$('.grid .item').click(function(){
$('.website .alert-element').toggleClass('is-active');
});
$('.section-modal .profile').click(function(){
$('.overlay').addClass('is-active');
setTimeout(function(){
$('.overlay').removeClass('is-active');
}, 5000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
.section-notification,
.section-alert
//display: none
body
font-family: 'Roboto', sans-serif
margin: 50px
-webkit-font-smoothing: antialiased
section
background: #ebeaeb
margin: 0px auto
min-height: 90vh
padding: 40px
display: flex
justify-content: center
align-items: center
margin-bottom: 50px
// Section - 1 - notification
.section-notification
.nav
display: flex
background: #333
color: white
border-radius: 4px
box-shadow: 0px 23px 30px -20px rgba(0,0,0,0.4)
.nav > li
padding: 20px 30px
width: 24px
height: 24px
cursor: pointer
color: rgba(255,255,255,0.6)
position: relative
transition: all 200ms ease-in-out
perspective: 1000px
&:last-child
border-right: none
&:hover
background: #444
&:hover:first-child,
&.is-active:first-child
border-top-left-radius: 5px
border-bottom-left-radius: 5px
&:hover:last-child,
&.is-active:last-child
border-top-right-radius: 5px
border-bottom-right-radius: 5px
&.is-active
box-shadow: 0px -4px 0px #0097A7 inset
background: #222
color: rgba(255,255,255,1)
.notifications
display: flex
animation: note 800ms ease-in-out forwards
transform-origin: center 60px
@keyframes note
0%
opacity: 0
transform: scale(0.1) rotate(30deg) translateY(50px) rotateX(90deg)
50%
transform: rotate(-10deg) rotateX(-2deg)
opacity: 1
70%
transform: rotate(3deg)
100%
transform: scale(1)
.notifications
background: #0097A7
display: none
border-radius: 4px
position: absolute
bottom: 100%
left: 50%
padding: 0px 10px
margin-bottom: 10px
margin-left: -95px
cursor: default
&:after
top: 100%
left: 50%
border: solid transparent
content: " "
height: 0
width: 0
position: absolute
pointer-events: none
border-color: rgba(0, 151, 167, 0)
border-top-color: #0097A7
border-width: 16px
margin-left: -16px
li
padding: 10px
font-family: 'Roboto', sans-serif
color: white
font-size: 18px
//height: 24px
.material-icons
font-size: 18px
span
display: inline-block
vertical-align: top
margin-left: 8px
// Section - 2 - Alerts
.section-alert
//align-items: flex-start
.website
background: white
width: 600px
margin: 0 auto
height: 560px
box-shadow: 0px 23px 40px -20px rgba(0,0,0,0.4)
overflow: hidden
position: relative
perspective: 1000px
.title
padding: 20px 10px 0
font-size: 30px
font-weight: 700
text-transform: uppercase
color: #444
line-height: 48px
letter-spacing: 0.1em
.site-icon
font-size: 48px
margin-right: 8px
vertical-align: middle
display: inline-block
hr
border: none
border-top: 1px solid #ccc
.grid
column-count: 4
column-gap: 10px
margin: 10px
.item
background: #ccc
height: 60px
margin-bottom: 10px
display: inline-block
width: 100%
border-radius: 4px
background:
size: cover
position: center
opacity: 0.6
transition: opacity 200ms ease
&:hover
opacity: 1
cursor: pointer
&:nth-child(4n-3)
height: 80px
&:nth-child(2n)
height: 200px
&:nth-child(3n)
height: 100px
@for $i from 1 through 30
&:nth-child(#{$i})
background-image: url(http://www.fillmurray.com/130/#{ 300 + ( $i * 2 ) })
.alert-element
position: absolute
bottom: 30px
left: 30px
color: rgba(255,255,255,0.7)
border-radius: 4px
font-weight: 400
display: flex
align-items: stretch
padding-right: 20px
perspective: 1000px
opacity: 0
transform-origin: bottom left
transform: rotate(90deg) scale(0.5) translate(100px, -300px) rotateX(90deg)
transition: all 450ms cubic-bezier(0, 0.6, 0.35, 1.4)
.icon
padding: 20px
background: #0097A7
color: white
border-radius: 4px 0px 0px 4px
overflow: hidden
i
transform: scale(0.2) translateY(50px)
opacity: 0
transition: all 400ms cubic-bezier(0, 0.6, 0.35, 1.4) 600ms
.text
background: rgba(0,0,0,0.8)
padding: 0 20px
display: flex
align-items: center
border-radius: 0px 4px 4px 0px
transform: rotateY(90deg)
transition: all 300ms ease-in-out 1000ms
transform-origin: center left
opacity: 0
&.is-active
opacity: 1
transform: rotate(0deg) scale(1)
i
transform: scale(1) translateY(0px)
opacity: 1
.text
transform: rotateY(0deg)
opacity: 1
// Section - 3 - Modal
.section-modal
position: relative
overflow: hidden
.profile
display: flex
align-items: center
background: rgba(0,0,0,0.1)
background: white
padding: 15px 30px
border-radius: 4px
box-shadow: 0px 23px 30px -20px rgba(0,0,0,0.4)
transition: all 200ms ease-in-out
&:hover
cursor: pointer
transform: translateY(-4px)
box-shadow: 0px 27px 30px -20px rgba(0,0,0,0.4)
.name
font-size: 24px
margin-bottom: 8px
.meta
color: rgba(0,0,0,0.4)
img
width: 80px
height: 80px
border-radius: 50%
margin-right: 20px
.overlay
position: absolute
top: 0
left: 0
right: 0
bottom: 0
background: rgba(0,0,0,0.7)
display: flex
justify-content: center
align-items: center
display: none
.modal
width: 450px
box-shadow: 0px 23px 30px -20px rgba(0,0,0,0.4)
.title
background: #0097A7
color: white
border-radius: 4px 4px 0px 0px
text-align: center
line-height: 48px
font-weight: 700
.body
background: white
border-radius: 0px 0px 4px 4px
line-height: 20px
display: flex
align-items: stretch
.text
padding: 30px
p
margin-bottom: 20px
.img
height: 180px
width: 140px
border-bottom-left-radius: 4px
flex-shrink: 0
background:
size: cover
position: center
&.is-active
display: flex
animation: overlayAnim 5s ease-in-out forwards
.modal
animation: modalAnim 5s ease-in-out forwards
@keyframes overlayAnim
0%, 100%
background-color: rgba(0,0,0,0)
15%, 85%
background-color: rgba(0,0,0,0.3)
@keyframes modalAnim
0%
transform: translateX(-200%) rotate(-90deg)
opacity: 0
10%
transform: translateX(4%) rotate(4deg)
15%, 85%
transform: translateX(0%)
opacity: 1
90%
transform: translateX(-4%) rotate(-4deg)
100%
transform: translateX(200%) rotate(90deg)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment