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.
Opens WPIDE on
Code
<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 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.