scrollreveal.js — -animated elements when scroll page example page(fortnite gun gallary)
Scrollreveal.js is a javascript library that is fully responsive and animated elements when scrolling the page which depends on the viewport.
Scroll reveal library Github API
Step1:
link scrollreveal.js at the bottom of the 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 arrow 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 shows up when the image is been hovering.
There is an underline animation of the title when hovered.
For a 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.
view factor: 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
👉Follow me for more useful web development content! love sharing🥰
