Using CSS and jQuery Animation in Web
Web 
THIS CONTENT DOWNLOAD SHORTLY
Created By Amin Raiyani | Last Updated on : 24 December 2016
Jump To
  1. Creating file
  2. Write a HTML code
  3. Apply CSS
  4. Apply animation
  5. Add another animation to make an adorable demo
  6. Add another HTML code
  7. Similarly using step-6
  8. Add CSS for mobile, tablet screen and other resolutions

Objective

Main objective of this blog post is to give you an idea about Using CSS and jQuery Animation in Web.

 

 

Step 1 Creating File

In this Demo, we have used bootstrap. So first of all add the bootstrap files:

  1. bootstrap.min.css
  2. bootstrap.min.js
  • And also add jquery-2.1.0.min.js
<link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script>
 

Step 2 Write HTML Code

Write a HTML code in body tag.

<body>
<div class="row">
<div class="col-md-12">
<div class="banner-background img-responsive">
<div class="col-md-6 pull-right">
<h1 >Woman Design</h1>
</div>
</div>
</div>
</div>
</body>
  • Here, we have also given the class names because in next step we need to apply some CSS.
 

Step 3 Apply CSS

Give margin: 0 and padding: 0 toand

tags. Also apply same css to .row and .col-md-12 class.

  • We have added background css to .banner-background class. Our second class .img-responsive is for responsive image.
  • And write some other CSS in style.css like font-size, color etc…
body{ margin:0; padding:0; font-family:Lato;}
.row{ margin:0px !important; padding:0px !important;}
.col-md-12{ margin:0px !important; padding:0px !important;}
h1{ margin:0; padding:0; color:#F8FF00; margin:10% 0 0 0; font-size:72px; font-weight:bolder; }
.banner-background{ background:url(../images/12.jpg); background-size:cover; height:970px; width:100%; }
 

Step 4 Apply Animation

Now, we have to apply animation.

  • First of all give following CSS to

tag.

h1{ margin:0; padding:0; color:#F8FF00; margin:10% 0 0 0; font-size:72px; font-weight:bolder; display:none; }
  • Now, we have to set the time interval for animation in jQuery. There is a readymade function in jQuery called setTimeOut.
  • We have to write code in $(document).ready function as shown below.
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function () {
$('h1').css("display", "block");
$('h1').addClass("slideInDown");
}, 1500);
</script>
  • In this function we have added CSS and class slideInDown.
  • slideInDown class is used for the CSS animation.
  • Also we have set the time interval to 1500ms.
  • Now we will write some CSS in slideInDown class.
.slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
@-webkit-keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible;} 100% {-webkit-transform: translateY(0); transform: translateY(0); } }
@keyframes slideInDown { 0% {-webkit-transform: translateY(-100%); transform: translateY(-100%);visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } }
 

Step 5 Add another animation to make adorable demo

Similarly we have to add another animation to make an adorable demo.

  • We have added some HTML code as follows:
<p>1MD aka One Million Dollars is an interactive playground created and managed by creatives. We enjoy experimenting and exploring new ways of communication. Every day we develop ideas or products we believe in. So If you're looking for something outside the box, or need a kick-ass strategy for pushing your brand digitally, here we are. Want to rework your visual identity? Need an incredibly efficient advertising campaign? How about a totally disruptive video, mobile app or game? Get us in. </p>
  • First of all, give the CSS for

tag.

p{display:none;}
  • Now, we have to set the time interval for the animation in jQuery.
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function () {
$('h1').css("display", "block");
$('h1').addClass("slideInDown");
}, 1500);
$(document).ready(function(){
setTimeout(function () {
$('p').css("display", "block");
$('p').addClass("slideInDown");
}, 2500);
</script>
  • Set the time interval to 2500ms.
  • Here the effect is same because we have used the same class slideInDown.
 

Step 6 Add another HTML Code

Now we have added an another HTML code.

<h3 class="gents">- Gents Arival</h3>
  • First of all, give the CSS for gents class. Major CSS include display:none; font-size, color etc…
  • Now, we have to set the time interval for the animation in jQuery.
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function () {
$('h1').css("display", "block");
$('h1').addClass("slideInDown");
}, 1500);
$(document).ready(function(){
setTimeout(function () {
$('p').css("display", "block");
$('p').addClass("slideInDown");
}, 2500);
$(document).ready(function(){
setTimeout(function () {
$('. gents').css("display", "block");
$('. gents').addClass("fadeInLeftBig");
}, 3500);
</script>
  • And now set the time interval to 3500ms.
  • Here we have added an another class fadeInLeftBig to give another effect.
  • Now we will write CSS in fadeInLeftBig class.
.fadeInLeftBig {-webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }
@-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% {opacity: 1; -webkit-transform: none; transform: none;} }
@keyframes fadeInLeftBig { 0% {opacity: 0;-webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0);} 100% { opacity: 1;-webkit-transform: none; transform: none;}}
 

Step 7 Similarly using step 6

we will add another HTML code and set time interval and also give an animation effect.

<h3 class="ladies">- Ladies Arival</h3>
<h3 class="children">- Children Arival</h3>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function () {
$('h1').css("display", "block");
$('h1').addClass("slideInDown");
}, 1500);
setTimeout(function () {
$('p').css("display", "block");
$('p').addClass("slideInDown");
}, 2500);
setTimeout(function () {
$('.gents').css("display", "block");
$('.gents').addClass("fadeInLeftBig");
}, 3500);
setTimeout(function () {
$('.ladies').css("display", "block");
$('.ladies').addClass("fadeInRightBig");
}, 4500);
setTimeout(function () {
$('.children').css("display", "block");
$('.children').addClass("fadeInLeftBig");
}, 5500);
});
</script>
.fadeInRightBig { -webkit-animation-name: fadeInRightBig;animation-name: fadeInRightBig;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
@-webkit-keyframes fadeInRightBig { 0%{opacity: 0;-webkit-transform: translate3d(2000px, 0, 0);transform: translate3d(2000px, 0, 0);}100% {opacity: 1;-webkit-transform: none;transform: none;}}
@keyframes fadeInRightBig {0% {opacity: 0;-webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none;transform: none;} }
 

Step 8 Add CSS For Mobile Tablet Screen and other resolution

Now, we have made a fully responsive demo that will be displayed perfectly in mobile screen,tablet screen and other resolutions.

  • Write following code in style.css to add the responsiveness.
@media screen and (min-width: 980px) and (max-width: 1108px) {
p{ font-size:20px;} h1{ font-size:48px; margin:0px !important;} .gents{ margin-top:280px;} .gents, .ladies, .children{ font-size:24px;} .col-md-12 .col-md-6{ float:none !important;} }
@media screen and (min-width:100px) and (max-width: 767px){
p{ font-size:14px;} h1{ font-size:40px; margin:0px !important;} .gents{ margin-top:280px;} .gents, .ladies, .children{ font-size:20px;} .col-md-12 .col-md-6{ float:none !important;}}
@media screen and (min-width: 768px) and (max-width: 979px) {
p{ font-size:18px;}h1{ font-size:44px; margin:0px !important;}.gents{ margin-top:280px;}.gents, .ladies, .children{ font-size:22px;}.col-md-12 .col-md-6{ float:none !important;}}

I hope this blog post will help you to using CSS and jQuery Animation in Web. Let me know in comment if you have any questions regarding Web. I will reply you ASAP.

Got an Idea of Web Development? What are you still waiting for? Contact us now and see the Idea live soon. Our company has been named as one of the best Web Development Company in India.

Created on : 10 March 2015

Amin Raiyani

As a Web Designer I designed the most attractive websites with use of working on a HTML 5 and CSS 3. I love to write & share tips & tricks about latest Web Design techniques.

PREVIOUS POST
Laravel - A Beautiful PHP Framework That Does Not Make Me Feel Stupid
NEXT POST
To Allow Two Way Text Chat Over Bluetooth in Android

Categories

3DS MaxAndroidBlogGraphicsiOSMayaUnityWebGame Design

Related Blog Posts

mobile strategy games for iphone mobile strategy games
face mask Belial The Demon Headgear Pocket Staff Magic