The page scroll animation builds with CSS which animate on scroll down the browser. Such kind of animation is great fun of resources. It adds some more creativity to your website and makes the page more user-friendly. Not only this but also it hides the element on the page until the user scrolls down to the page.
If you are working on a client website and want to add something stunning effect then such page animation help you a lot. I am going to create a demo version of it so you can get an idea of how it works. I am going to use AOS plugin to build a demo and this plugin is pretty much lightweight.
The AOS plugin is easy to customizable and comes up with a lot of nice functions. The implementation is also easy by using the data-attribute.
Implemention of Page Scroll Animation
There are two files which you need to include in the <head>: You can also add the Js file before closing </body> tag to make the page load fast.
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /> <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
Next, We will initialize the AOS function:
<script>
AOS.init();
</script>The plugin gives you the ability to customize the function as per your need. You can change the value to make it fit into your site design.
AOS.init();
// You can also pass an optional settings object
// below listed default settings
AOS.init({
// Global settings
disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
initClassName: 'aos-init', // class applied after initialization
animatedClassName: 'aos-animate', // class applied on animation
useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
// Settings that can be overriden on per-element basis, by `data-aos-*` attributes:
offset: 120, // offset (in px) from the original trigger point
delay: 0, // values from 0 to 3000, with step 50ms
duration: 400, // values from 0 to 3000, with step 50ms
easing: 'ease', // default easing for AOS animations
once: false, // whether animation should happen only once - while scrolling down
mirror: false, // whether elements should animate out while scrolling past them
anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});Set Scroll Animation using attribute:
As I said the plugin comes with data attribute so you can use data-aos-* attributes and adjust the behavior. Let’s says we have a div element
<div data-aos="fade-in"></div>
The data-aos will be used to add the type of animation. You can apply a different kind of animation from fade, flip, slide, zoom and many more.
It also offers you different data types which allow you to add delay, duration, easing, mirror, and placement. These types allow making work the animation as you want it to be.
<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
>
</div>Adding custom animations:
Sometimes plugins don’t have an animation that you or your client need. If you think or need additional animation then you can add your own animation easily.
For example, if you have a div element which has different animation according to different resolutions then here is how you could do that.
[data-aos="custom-animation"] {
opacity: 0;
transition-property: transform, opacity;
&.aos-animate {
opacity: 1;
}
@media screen and (min-width: 768px) {
transform: translateX(100px);
&.aos-animate {
transform: translateX(0);
}
}
}Then use it in HTML:
<div data-aos="custom-animation"></div>The div element will only animate opacity on mobile devices, but from a 768px width, it’ll also slide from right to left.
Integrating external Animation library
If you want to add an external animation library such as animated.css then you can Use animatedClassName to change the default behavior of AOS. Then you need to apply class name placed inside data-aos on scroll.
<div data-aos="fadeInUp"></div>AOS.init({
useClassNames: true,
initClassName: false,
animatedClassName: 'animated',
});