# 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.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: animation, scroll, blocks, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-scroll-reveal/

## Code

```html
<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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Reveal Blocks on Scroll" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/