MAJOR PROJECT: AOS SCROLL ANIMATION

 

aosfade

 

AOS Scroll will allow for elements to animate in as the user scrolls down the website, this will add a nice effect to the website changing the static images into objects that move in and animate.

Before doing anything it is important to download and place the aos files within your websites file tree and then link the AOS CSS and Javascript to your html file.

HTML

With AOS Animate On Scroll there are many different effects you can add to a HTML element, allowing you to make an element transition in any way you see fit depending on your own ideas.

It works by placing HTML elements within a div and then attaching a data-aos to it, the data-aos allows you to implement an animation to the image or text you want to animate, there are many different options of animations in this case I want this image to fade-up.

aos123

Not only can you add animations to an element but you can also set a delay on the animation and make it appear just after another animation.

JAVASCRIPT

There are many set ups for the AOS scroll animation, you can set it so that all elements with a data-aos attribute attached all have the same settings and animation, but in this case I want to manually set the data-aos of each element so I will keep it at its default setting.

aoswoo

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s