This is a CSS based animation library which allows you to add animation on the scroll. It developed with the latest accelerating techniques to make sure it loads fast and work well on every single page. It is designed to make sure each of the single animations run smoothly.
The great thing about this scroll based animation is to utilize the GPU rather than the CPU. It can be incorporated with Just a few lines of code and easy to implement on any kind of website.
How to Make Scroll Based Animation
This library uses the CSS3 animation which triggered by Javascript. You only need to include JQuery file to make it work on your webpage.
Lets first add both CSS and Js file in the head. You need to include the css3-animated.js and animations.css
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="animations.css" type="text/css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="css3-animate-it.js"></script>
</body>
</html>In our demo, you can see we have created boxes and if you want to create similar boxes to your website then you need to add a few lines of CSS code. Actually, I just did set the width and make the boxes inline-block so we can arrange three boxes in a row.
For the class box, We have applied a background color, some margin about 12px and height 250. The width will be auto according to parent DIV.
<head>
<style>
.animatedParent {
display: inline-block;
width: 33%;
}
.box {
width: auto;
height: 250px;
background-color: #7b00ff;
margin: 12px;
}
</style>
</head>Now let’s have a look the simple HTML. You only need to define one parent div with class name animatedParent for each box and then child div will have unique class according to animation which you want to apply.
<div class="animatedParent">
<div class="animated bounceInDown box"></div>
</div>
<div class="animatedParent">
<div class="animated fadeIn box"></div>
</div>
<div class="animatedParent">
<div class="animated growIn box"></div>
</div>
<div class="animatedParent">
<div class="animated bounceInRight box"></div>
</div>
<div class="animatedParent">
<div class="animated fadeInDown box"></div>
</div>The library comes with four different speeds variation and you can set as a normal, slow, slower or slowest.
<div class="animatedParent">
<div class="animated bounceInDown box"></div>
</div>
<div class="animatedParent">
<div class="slow animated fadeIn box"></div>
</div>
<div class="animatedParent">
<div class="slower animated growIn box"></div>
</div>
<div class="animatedParent">
<div class="slowest animated bounceInRight box"></div>
</div>Animation Delay CSS Classes
If you want to set custom delay then here is a list of all dealy classes.
- delay-250
- delay-500
- delay-750
- delay-1000
- delay-1250
- delay-1500
- delay-1750
- delay-2000
- delay-2500
- delay-3000
- delay-3500