I’m looking for a code about an animation on a background-image who’s moving and make a distortion of the image.
Here’s the example of a website using Squarespace code with the animation that I’m looking for:
https://www.eliekupsc.com/cal-test-design
I hope that someone could have a solution for me.
Thank you by advance, best
I searched for this for a long time and here’s what’s the best I have for now:
<div class="background-container">
<img src="<?php bloginfo('stylesheet_directory');?>/images/fond_general.jpg" alt="Background Image" class="background-image">
</div>
<style>
.background-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.background-image {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
filter: url(#displacementFilter);
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
const filter = document.createElementNS(svgNS, "filter");
const feTurbulence = document.createElementNS(svgNS, "feTurbulence");
const feDisplacementMap = document.createElementNS(svgNS, "feDisplacementMap");
svg.setAttribute("style", "position: absolute; width: 0; height: 0;");
filter.setAttribute("id", "displacementFilter");
feTurbulence.setAttribute("type", "turbulence");
feTurbulence.setAttribute("baseFrequency", "0.01 0.01");
feTurbulence.setAttribute("numOctaves", "3");
feTurbulence.setAttribute("seed", "2");
feDisplacementMap.setAttribute("in", "SourceGraphic");
feDisplacementMap.setAttribute("in2", "turbulence");
feDisplacementMap.setAttribute("scale", "30");
filter.appendChild(feTurbulence);
filter.appendChild(feDisplacementMap);
svg.appendChild(filter);
document.body.appendChild(svg);
const animateTurbulence = () => {
let baseFrequencyX = 0.01, baseFrequencyY = 0.01;
let directionX = 1, directionY = 1;
const animate = () => {
if (baseFrequencyX > 0.015 || baseFrequencyX < 0.005) directionX *= -1;
if (baseFrequencyY > 0.015 || baseFrequencyY < 0.005) directionY *= -1;
baseFrequencyX += directionX * 0.00001;
baseFrequencyY += directionY * 0.00001;
feTurbulence.setAttribute('baseFrequency', `${baseFrequencyX} ${baseFrequencyY}`);
requestAnimationFrame(animate);
};
animate();
};
animateTurbulence();
});
</script>
But the animation is not moving on the image. The effect is eveywhere.
I tried PIXI and some other plugin but I want to use an SVG background and it’s not working with SVG or big images.
The example of this Squarespace website is what I really want: https://www.eliekupsc.com/cal-test-design