WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1554
Andev.web
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
13 April 2025
PDF
22 March 2025
Gaming-Siteweb
27 May 2025
Futuristische Kontaktseite
HTML
Copy
Andev Web
CSS
Copy
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; } body { background:hsl(270,75%,8%); }
JS
Copy
console.clear() const c = document.querySelector('canvas') const ctx = c.getContext('2d') let cw = c.width = innerWidth let ch = c.height = innerHeight const bubbles = [] const debounce = gsap.to(window, {duration:0.07}) const img = new Image() const m = {x:0, y:0} img.src = 'https://assets.codepen.io/721952/bubbles_1.webp' img.onload = ()=>{ for (i=0; i<20; i++) { m.x = gsap.utils.random(150, cw-150, 1) m.y = gsap.utils.random(150, ch-150, 1) makeBubble(true) } } window.onpointerdown = window.onpointermove = e =>{ m.x = e.x m.y = e.y makeBubble() } function makeBubble(auto){ if (debounce.progress()==1 || auto) { debounce.play(0) const dist = gsap.utils.random(100, 200) const scale = gsap.utils.random(0.4, 0.8) const b = { dur:gsap.utils.random(3, 7), spriteDur:gsap.utils.random(0.12, 0.5), rotate:gsap.utils.random(-9, 9), scaleX:scale, scaleY:scale, step:0, x:0, y:0, n:bubbles.length } bubbles.push(b) gsap.timeline({defaults:{ease:'none'}}) .fromTo(b, { x:m.x-75*scale, y:m.y-75*scale, },{ duration:b.dur, rotate:'+='+gsap.utils.random(-5, 5, 1), motionPath:()=>'M'+b.x+','+b.y+ 'c'+gsap.utils.random(-dist,dist,1)+','+gsap.utils.random(-dist,dist,1)+' '+ gsap.utils.random(-dist,dist,1)+','+gsap.utils.random(-dist,dist,1)+' '+ gsap.utils.random(-dist,dist,1)+','+gsap.utils.random(-dist,dist,1) }, 0) .to(b, { duration:b.dur/5, ease:'sine.inOut', yoyo:true, repeat:3, repeatRefresh:true, scaleX:()=>scale+gsap.utils.random(-0.1,0.1), scaleY:()=>scale+gsap.utils.random(-0.1,0.1), }, b.dur/5) .to(b, { duration:b.spriteDur, step:8, snap:'step' }, b.dur-b.spriteDur*2) } } gsap.ticker.add(()=>{ ctx.clearRect(0,0,cw,ch) bubbles.forEach(b=> { ctx.translate(b.x+b.scaleX*75, b.y+b.scaleY*75) ctx.rotate(b.rotate) ctx.drawImage(img, 0, b.step*150, 150, 150, -b.scaleX*75, -b.scaleY*75, b.scaleX*150, b.scaleY*150) ctx.rotate(-b.rotate) ctx.translate(-b.x-b.scaleX*75, -b.y-b.scaleY*75) }) }) window.onresize = ()=>{ cw = c.width = innerWidth ch = c.height = innerHeight }