WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Burbujas de hojas de sprites de lienzo
1704
Andev.web
Abrir en el editor
Video
Publica tu código
1
Recomendado
30 December 2024
Un código de cleancloud199
22 August 2025
Ejemplo de botones de contacto HTML
22 May 2025
Juego de escape
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 }