How to create simple animation on the scroll?
You may create animation for different HTML elements in DOM by using the dctb-animate-scroll jQuery plug-in. For example, displaying image and text in a div or paragraph as a user scrolls down to that element with animation.
Developer’s page Download plug-in
How to implement animate scroll plug-in?
Include the JS file of the plug-in before the body closing tag before jQuery library:
<script type=”text/javascript” src=”js/animate-scroll/animate-scroll.js”></script>
Using data attributes in elements for animation
You need to use the data-as as true in the element where you want to animate on scrolling:
For example:
<section class="anime-element-start-1" data-as="true" data-as-animation="anime-element-end-1">
The data-as-animation is assigned the CSS class that will append as the element is in view. It may contain your own style or get an idea from the demo below.
An example CSS class can be:
. anime-element-start-1{
opacity: 0.8;
transform: translate3d(-100px,10,20);
transition: .5s;
}
. anime-element-end-1{
opacity: 0.7;
transform: translate3d(20,15,0);
}
A demo of creating animation on scroll
The demo contains a few sections with dummy text for illustration. As you scroll down the page, you can see image and text appear with animation for different sections. You may display images, text, form elements, HTML table etc.
Online demo and code
Basically, you will provide two CSS classes; one as the element appears on the scroll which is given the class attribute in the demo (anime-start-1) and the other in the data-as-animation attribute that will append as the element is out of view.
Play with CSS by overriding or adding new classes in the existing CSS file or use your own. See another demo below.
Demo with animation rotate at 45 degree
I have changed the animation properties a little bit just to show how you may play with this. The odd sections are assigned the animation-start and animation-end classes:
<section class="animation-start" data-as="true" data-as-animation="animation-end">
This CSS is used for both classes:
.animation-start {
opacity: 0;
transform: rotate(45deg);
transition: 0.5s;
}
.animation-end {
opacity: 1;
transform: translate(-3em,1em);
transition: 1s;
}
See the output:
Just try your way.