title
A prototype
body{ background:red; } .draggable { width: 50px; height:50px; background-color:white; position:fixed; border-radius:100px; box-shadow:0 2px 2px black; }
// yOffset = currentY; const d = document, b = d.body limitDistance = 500, autoPlayTime = 1000 const draggable = document.querySelector('.draggable'); // Drag let dragActive = false; let currentX, currentY, initialX, initialY; let xOffset = yOffset = 0; d.addEventListener("touchstart", dragStart, false); d.addEventListener("touchend", dragEnd, false); d.addEventListener("touchmove", drag, false); d.addEventListener("mousedown", dragStart, false); d.addEventListener("mouseup", dragEnd, false); d.addEventListener("mousemove", drag, false); // Drag Start let tempPos let firstMove = true function dragStart(e) { tempPos = getPosition(draggable) if (e.type === "touchstart") { initialX = e.touches[0].clientX - xOffset; initialY = e.touches[0].clientY - yOffset; } else { initialX = e.clientX - xOffset; initialY = e.clientY - yOffset; } if (e.target === draggable) { dragActive = true; } } // Drag End function dragEnd(e) { initialX = currentX; initialY = currentY; dragActive = false; } // Dragging function drag(e) { if (dragActive) { e.preventDefault(); if (e.type === "touchmove") { currentX = e.touches[0].clientX - initialX; currentY = e.touches[0].clientY - initialY; } else { currentX = e.clientX ; currentY = e.clientY ; } console.log(e.clientX) xOffset = currentX; yOffset = currentY; setPosition(currentX, currentY, draggable); } } function setPosition(xPos, yPos, el) { el.style.top = yPos + "px"; el.style.left = xPos + "px"; } function getPosition(el) { return([el.style.top, el.style.left]) } function updateAnimation (x, y) { draggable.style.left = x+"px" draggable.style.top = y+"px" } function render (a) { const noiseX = (noise.simplex3(2, 0, a*0.00008) + 1) / 2; const noiseY = (noise.simplex3(10, 0, a*0.00008) + 1) / 2; const x = noiseX * innerWidth; const y = noiseY * innerHeight; updateAnimation(x, y); if(!dragActive){ requestAnimationFrame(render); } } requestAnimationFrame(render);
snap
save
new
fork
download
html
css
js
output
gallery
config
➚ link to output
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code