# Subtle Parallax Effect for Images

> Gives images inside blocks with the class "wpide-parallax" a gentle parallax movement while scrolling, adding depth to hero and feature sections.

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

## Code

```html
<style>
.wpide-parallax{overflow:hidden;}
.wpide-parallax img{will-change:transform;transform:scale(1.15);}
@media (prefers-reduced-motion:reduce){.wpide-parallax img{transform:none;}}
</style>
<script>
(function () {
    if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) { return; }
    var items = Array.prototype.map.call(document.querySelectorAll('.wpide-parallax img'), function (img) {
        var box = img.closest('.wpide-parallax');
        return { img: img, box: box, speed: parseFloat(box.getAttribute('data-speed')) || 0.15 };
    });
    if (!items.length) { return; }
    var ticking = false;
    function update() {
        var vh = window.innerHeight;
        items.forEach(function (it) {
            var r = it.box.getBoundingClientRect();
            if (r.bottom < 0 || r.top > vh) { return; }
            var offset = (r.top + r.height / 2 - vh / 2) * -it.speed;
            it.img.style.transform = 'translate3d(0,' + offset.toFixed(1) + 'px,0) scale(1.15)';
        });
        ticking = false;
    }
    window.addEventListener('scroll', function () { if (!ticking) { ticking = true; requestAnimationFrame(update); } }, { passive: true });
    window.addEventListener('resize', update);
    update();
})();
</script>
```

## Notes

Add wpide-parallax to an Image or Group block. Set the strength with data-speed (not available in the editor), default 0.15. No movement for visitors who prefer reduced motion.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Subtle Parallax Effect for Images" 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/