codepens/svg-scribblemation/dist/script.js

27 lines
922 B
JavaScript

const body = document.body;
const speed = document.getElementById("speed");
const delay = document.getElementById("delay");
const width = document.getElementById("width");
const easing = document.getElementById("easing");
const left = document.getElementById("left");
const right = document.getElementById("right");
body.querySelectorAll(".slider").forEach(slider => {
slider.addEventListener('input', e => {
body.style.setProperty("--speed", speed.value);
body.style.setProperty("--delay", delay.value);
body.style.setProperty("--left", left.value);
body.style.setProperty("--right", right.value);
if (easing.checked === true){
body.style.setProperty("--easing", "cubic-bezier(0.85, 0.5, 0.5, 1.25)");
}else{
body.style.setProperty("--easing", "linear");
}
if (width.checked === true){
body.style.setProperty("--width", 2);
}else{
body.style.setProperty("--width", 1);
}
});
});