scrollreveal.js---animated elements when scroll page example page(fortnite gun gallary)

Scrollreveal.js is a javascript library which is fully responsive and animated elements when scrolling the page which is depends on viewport.

Scrollreveal library Github   API 

Step1:
link scrollreveal.js at the bottom of body

Step2:
HTML
There is an image and a scroll gif in the header.

And 29 div in the container.

Step3:
CSS
The gif scrolling arrrow css

LAYOUT is based on flex.

And every gun picture has a background with animation.

When hovering, the black filter will be added.

The information show up when the image is been hovering.

There is an underline animation of title when hovered.

For responsive site such as some phone ,  it would be a different style 

Step4:
JS

initialize the library 

window.sr = ScrollReveal();
sr.reveal('.reveal');







There are 5 options/animations for reveal method:

options.delay is the time before reveal animations begin. By default, delay will be used for all reveal animations, but options.useDelay can be used to change when delay is applied. However, animations triggered by options.reset will never use delay.

options.distance controls how far elements move when revealed.

options.duration controls how long animations take to complete.

options.easing controls how animations transition between their start and end values.

options.interval is the time between each reveal.




// Change when an element is considered in the viewport. The default value
// of 0.20 means 20% of an element must be visible for its reveal to occur.
viewFactor: 0.2
viewOffset: { top: 0, right: 0, bottom: 0, left: 0 }



viewOffset changes the boundaries of the container, using pixels.
viewFactor changes the boundaries of elements, using percentages.


The example Github here