ScrollOut is an awesome library, that detects changes in scroll for reveal, parallax, and CSS Variable effects!
Scroll down to the bottom of this page to see it in action.
Step 1
Download the zip file : https://scroll-out.github.io/
Then upload and enqueue the file scroll-out.min.js
wp_enqueue_script( 'scrollout-js', plugin_dir_url( __FILE__ ) . 'assets/js/scroll-out.min.js', '','', true );
[ see HOWTO to learn how to add custom files ]
Step 2
In a Code Block, add this code in the Javascript panel :
ScrollOut({
targets: ".banner",
threshold:0.5,
once: false
});;
It simply means that we target the element with the ".banner" class. The threshold is the ratio of the element that must be visible before it is marked as visible.
More info here : https://scroll-out.github.io/guide.html#configuration
ScrollOut will automatically add the attribute "data-scroll" to the element.
So now we just have to "style" it.
Note that everything is well explained in the official documentation.
Step 3
In CSS :
.banner[data-scroll] {
transition: opacity 2s ease;
}
.banner[data-scroll="in"] {
opacity: 1;
}
.banner[data-scroll="out"] {
opacity: 0;
}
The following image will fade in when it appears on screen, then fade out when it disappear :
Now for the next example, we are going to use it with a gallery.
For the Javascript :
ScrollOut({
targets: ".oxy-gallery-item",
threshold:0.5,
once: false
});
and for the CSS :
.oxy-gallery-item[data-scroll] {
transition: all 1s ease;
}
.oxy-gallery-item[data-scroll="in"] {
opacity: 1;
transform: translateX(0) scale(1)
}
.oxy-gallery-item:nth-child(odd)[data-scroll="out"] {
opacity: 0;
transform: translateX(-100%) scale(0.1)
}
.oxy-gallery-item:nth-child(even)[data-scroll="out"] {
opacity: 0;
transform: translateX(+100%) scale(0.1)
}
No CSS here as the animation is made by Animate.
So we just have to add some JS :
var el2 = document.querySelector(".banner2");
el2.setAttribute('data-scroll', '');
ScrollOut({
onShown: function(el2) {
// remove the class
el2.classList.remove("animated","zoomIn");
// force reflow
void el2.offsetWidth;
// re-add the animated cl
el2.classList.add("animated","zoomIn");
}
});