Blog

  • Today I will share an amazing mobile screen bounce in/out effect. That I personally like very much.It's really exciting.This is the brilliant mobile screen animation with fully explained for understanding the logic.I will explain the code to you.
     
     Let's start:-
     
     The technology you need:- HTML and CSS3 
     
     Step 1:- Include the HTML -   
                    
    <div class="mobile-cover">
      <div class="mobile-container">
        <div class="banner-cover">
          <div class="first-screen-cover"><img src="images/screen1.png"/></div>
          <div class="second-screen-cover"><img src="images/screen2.png"/></div>
          <div class="third-screen-cover"><img src="images/mobile.png"/></div>
    </div> 
    </div>
    </div>
     
    You need three images for that:-
     
    i.e :-   screen1.png, screen2.png, mobile.png
     
    you can grab these images from => https://jsfiddle.net/rohitgoyal9293/e0dv7cay/3/
       
     Step 2:- Include the CSS -
     
    (i) Structure:-
     
    Add the code below in your CSS:-
                    
    .mobile-cover{background:#4CBDD7;}
    .mobile-container{width:1180px;margin:0 auto;}
    .banner-cover{position: relative;height:1000px;margin-left:80px;}
     First of all, we take a  mobile cover and inside it, we take a mobile container and sets the margin:0 auto. By the help of this property, mobile-container will take equal margin from left and right.Inside mobile-container, we will take a banner-cover that will cover our 3 screens.
     
     
    (ii) Animation of screen 1:-
       
      In css3 keyframe is used for defining the animation from start to end.   hvr-bob-one is the keyframe for the first screen.
            
            Case- I:- At 0% animation
            => At 0% animation translateY(-100px) give -100px rise to screen1. 
            
            Case- II:- At 50% animation
            => At 50% animation translateY(-50px) the translation is reduced by -50px   . 
            
            Case- III:- At 100% animation
            => At completion of  animation translateY(-100px) the screen1 regain its orginal position same as the
             state of 0% animation.
            
            Note:- We have to make a separate keyframe for the chrome and firefox for compatibility. 
       
          Add the code below in your CSS:-
     
    @-keyframes hvr-bob-one {
    0% {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
     transform: translateY(-100px);
    }
    50% {
     -webkit-transform: translateY(-50px);
    -moz-transform: translateY(-50px);
     transform: translateY(-50px);
    }
    100% {
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    transform: translateY(-100px);
    }
    }
    @-webkit-keyframes hvr-bob-one {
      0% {
       -webkit-transform: translateY(-100px);
       transform: translateY(-100px);
      }
     50% {
     -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
    }
    100% {
     -webkit-transform: translateY(-100px);
      transform: translateY(-100px);
    }
    }
    @-moz-keyframes hvr-bob-one {
     0% {
       -moz-transform: translateY(-100px);
       transform: translateY(-100px);
    }
    50% {
    -moz-transform: translateY(-50px);
    transform: translateY(-50px);
    } 
    100% {
      -moz-transform: translateY(-100px);
      transform: translateY(-100px);
    }
    }
     
      
      (iii) Animation of screen2:-
       
            same as the scree1 we have to the give animation for screen2.
            hvr-bob-two is the keyframe for the second screen.
            
            Case- I:- At 0% animation
            => At 0% animation translateY(-50px) give -50px rise to screen1. 
            
            Case- II:- At 50% animation
            => At 50% animation translateY(-25px) the translation is reduced by -25px   . 
            
            Case- III:- At 100% animation
            => At completion of  animation translateY(-50px) the screen2 regain its orginal position same as the
             state of 0% animation.
            
          
      Add the code below in your CSS:-
    @keyframes hvr-bob-two {
    0% {
     -moz-transform: translateY(-50px);
    -webkit-transform: translateY(-50px);
     transform: translateY(-50px);
     }
    50% {
      -moz-transform: translateY(-25px);
      -webkit-transform: translateY(-25px);
       transform: translateY(-25px);
    }
    100% { 
      -moz-transform: translateY(-50px);
      -webkit-transform: translateY(-50px);
       transform: translateY(-50px);
    }
    }
    @-webkit-keyframes hvr-bob-two {
      0% {
       -webkit-transform: translateY(-50px);
        transform: translateY(-50px);
      }
     50% {
      -webkit-transform: translateY(-25px);
      transform: translateY(-25px);
    }
    100% { 
      -webkit-transform: translateY(-50px);
       transform: translateY(-50px);
    }
    }
    @-moz-keyframes hvr-bob-two {
      0% {
       -moz-transform: translateY(-50px);
       transform: translateY(-50px);
    }
    50% {
      -moz-transform: translateY(-25px);
       transform: translateY(-25px);
    }
    100% { 
      -moz-transform: translateY(-50px);
       transform: translateY(-50px);
    }
    }
      (iv) The positioning of screens:-
      
        Now we have to set the position of all screen.By giving its position to absolute and adjusting the position from the top and left. Also, we have to give "animation-duration"    which will define the total time for the animation, "animation-delay" by which we can set the delay to the animation, animation-iteration which will count the animation, animation-timing-function,animation-fill-mode, and animation-direction.
       
     Add the CSS given below:-  
                   
    .first-screen-cover{
    position: absolute;
    top:12%;
    left:12%;
    z-index: 3;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-animation-name: hvr-bob-float-one, hvr-bob-one;
     -moz-animation-name: hvr-bob-float-one, hvr-bob-one;
    animation-name: hvr-bob-float-one, hvr-bob-one;
    -webkit-animation-duration: .3s, 1.5s;
     -moz-animation-duration: .3s, 1.5s;
     animation-duration: .3s, 1.5s;
     -webkit-animation-delay: 0s, .3s;
    -moz-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    -moz-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    -moz-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
     -webkit-animation-direction: normal, alternate;
    -moz-animation-direction: normal, alternate;
     animation-direction: normal, alternate;
    }
    .second-screen-cover{ 
    position: absolute; 
    top:20%;
    left:12%;
    z-index: 2; 
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-animation-name: hvr-bob-float-two, hvr-bob-two;
    -moz-animation-name: hvr-bob-float-two, hvr-bob-two;
     animation-name: hvr-bob-float-two, hvr-bob-two;
    -webkit-animation-duration: .3s, 1.5s;
    -moz-animation-duration: .3s, 1.5s;
     animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
     -moz-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    -moz-animation-timing-function: ease-out, ease-in-out;
     animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    -moz-animation-iteration-count: 1, infinite;
     animation-iteration-count: 1, infinite;
     -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
     -moz-animation-direction: normal, alternate;
      animation-direction: normal, alternate;
    }
    (v) No animation in third screen:-
     
    Third screen is our mobile screen. we don't give any animation in third screen
    Add the css given below:-
     
    .third-screen-cover{
      position: absolute;
      top:20%;
      z-index: 1;
    }
     
    Great.... You'r done !
     
    Now we end up with amazing mobile screen Bounce in/out effect.
     
    You can watch the demo at => https://jsfiddle.net/rohitgoyal9293/e0dv7cay/3/
     
    Note:- The above code is tested on the latest version of firefox and google chrome.

Tags: html