How To Create Animated Mobile Screen Bounce Effect Using HTML5 And CSS3
Posted By : Rohit Goyal | 30-Mar-2018
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.
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.
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rohit Goyal
Rohit is an experienced Frontend Developer, having good experience in HTML5, CSS3, Bootstrap, Jquery, AngularJS, Angular4/5, Restful API Integration, ES6 . His hobbies are playing cards and cricket.