Animated notifications

animated-notifications.markdown

Animated notifications

A Pen by Yanni on CodePen.

License.

index.html

<!-- 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>

script.js

$('.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);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.sass

.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)