First of all, I’m a code illiterate. I’m just a silly monkey who sees code on codepen, doesn’t understand it, but plays with variables until he’s happy with the results. I know nearly nothing about CSS and JS scripting, so chances are the solution to my problem is very obvious.
Anyhoo, I’ve been working on this website in Elementor for a friend and he wants me to insert subtle background animation of water ripples. It was surprisingly hard to find anything close to what we want, but eventually I found this dude’s code [https://codepen.io/jonobr1/pen/eedpwP?editors=0010]) . In my reversed “monkey do -> monkey see” fashion I tweaked the code a little bit to remove the rain drops and adjust the angle (I made the ripples even circles instead of ellipses). This is what I ended up with:
<script src=https://storage.googleapis.com/archive.jono.fyi/projects/two-js/build/2017-10-26/two.min.js></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/tween.js/17.1.1/Tween.min.js></script>
<script>
var two = new Two({
type: Two.Types.canvas,
fullscreen: true,
autostart: true
}).appendTo(document.body);
two.renderer.domElement.style.background = ‘#00000000’;
var ground = two.makeGroup();
var angle = 0;
var rain = new Array(150);
rain.next = function() {
var drop = rain[rain.index];
rain.index = (rain.index + 1) % rain.length;
return drop;
};
rain.index = 0;
var ripples = new Array(250);
ripples.next = function() {
var ripple = ripples[ripples.index];
ripples.index = (ripples.index + 1) % ripples.length;
return ripple;
};
ripples.index = 0;
for (var i = 0; i < ripples.length; i++) {
var ripple = makeRipple();
ripples[i] = ripple;
if (ripple.child) {
ground.add(ripple.child);
}
if (i < rain.length) {
var drop = makeDrop();
rain[i] = drop;
}
}
var pouring = false;
ground.add(ripples);
two.add(rain);
ground.scale = new Two.Vector(1, 1);
two.bind(‘update’, function(frameCount) {
TWEEN.update();
if (pouring && !(frameCount % 1)) {
rain.next().start();
ripples.next().start();
} else if (!(frameCount % 50)) {
rain.next().start();
}
});
function makeDrop(i) {
var seed = Math.random();
var drop = two.makeLine(0, 0, 0, 0);
drop.visible = false;
drop.cap = ’round’;
drop.noFill().stroke = ”;
drop.tweens = {
i: new TWEEN.Tween(drop.vertices[0])
.easing(TWEEN.Easing.Sinusoidal.In)
.onComplete(function() {
ripples.next().start(drop.vertices[0].x, drop.vertices[0].y);
}),
o: new TWEEN.Tween(drop.vertices[1])
.delay(seed * 0)
.easing(TWEEN.Easing.Sinusoidal.In)
.onComplete(function() {
drop.visible = false;
})
};
drop.start = function() {
var dx = Math.random() * two.width;
var dy = Math.random() * two.height;
var ox = 1000 * Math.cos(angle – Math.PI / 2) + dx;
var oy = 1000 * Math.sin(angle – Math.PI / 2) + dy;
var dest = {
x: dx,
y: dy
};
drop.visible = true;
drop.linewidth = Math.random() * 3;
drop.vertices[0].set(ox, oy);
drop.vertices[1].set(ox, oy);
drop.tweens.i.to(dest, seed * 250 + 50).start();
drop.tweens.o.to(dest, seed * 250 + 50).start();
};
return drop
}
function makeRipple(i) {
var seed = Math.random();
var ripple = two.makeCircle(0, 0, 0);
ripple.visible = false;
ripple.noFill().stroke = ‘#162f57′;
ripple.tween = new TWEEN.Tween(ripple)
.to({ radius: seed * 150 + 200, linewidth: 0 }, seed * 2000 + 2050)
.easing(TWEEN.Easing.Sinusoidal.Out)
.onComplete(function() {
ripple.visible = false;
});
if (Math.random() > 0.5) {
ripple.child = two.makeCircle(0, 0, 0);
ripple.child.noFill().stroke = ripple.stroke;
ripple.child.tween = new TWEEN.Tween(ripple.child)
.to({ radius: seed * 50 + 100, linewidth: 0 }, seed * 1250 + 1750)
.delay(Math.random() * 100)
.onComplete(function() {
ripple.child.visible = false;
});
}
ripple.start = function(x, y) {
if (x && y) {
ripple.translation.set(x, y / ground.scale.y);
} else {
ripple.translation.set(
Math.random() * two.width / ground.scale.x,
Math.random() * two.height / ground.scale.y
);
}
ripple.radius = 0;
ripple.linewidth = Math.random() * 3 + 1;
ripple.visible = true;
ripple.tween.start();
if (ripple.child) {
ripple.child.translation.copy(ripple.translation);
ripple.child.radius = 0;
ripple.child.linewidth = ripple.linewidth;
ripple.child.visible = true;
ripple.child.tween.start();
}
};
return ripple;
}
</script>
So next I did some digging on how to implement that into elementor and I quickly learned that you do it through the HTML widget. Ok, looks easy peezy. But then the issue from the title happens.
I click update and while the ripple rings are generating nicely, I can no longer scroll. I thought I could work my way around that with z-index, but no luck. What I’d like is either for the bg animation to stay as a sticky while the user scrolls down, or maybe the animation could just extend all the way to do the bottom of the page (I imagine the former would be more resource friendly though).
What can I do to make it work? Also please be patient with me and speak to me like to a total layman \^\^’
Cheers!
[ad_2]