Reveal Blocks on Scroll
Fades and slides content blocks into view as the visitor scrolls. Add the class "reveal" to any block in the editor (Advanced > Additional CSS class) to animate it.
Opens WPIDE on
Code
<style>
@media (prefers-reduced-motion: no-preference) {
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal.is-visible{opacity:1;transform:none;}
}
</style>
<script>
(function () {
var items = document.querySelectorAll('.reveal');
if (!items.length) { return; }
if (!('IntersectionObserver' in window)) { items.forEach(function (el) { el.classList.add('is-visible'); }); return; }
var observer = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); }
});
}, { rootMargin: '0px 0px -10% 0px' });
items.forEach(function (el) { observer.observe(el); });
})();
</script>Notes
Respects the reduced-motion accessibility setting. Use "reveal" on groups, columns, images or headings.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.