WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
4155
webleb
Veröffentlichen Sie Ihren Code
20 June 2025
Dekonstruiertes Metaversum
13 June 2025
Gestapelte Stickerkarten
index.html
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Webleb</title> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <meta content="" name="keywords"> <meta content="" name="description"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js"></script> <link href="css/styles.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="txt1">www.tiktok.com/</div><span class="txt2">example</span><div class="bar"></div> </div> <script src="/js/main.js"></script> </body> </html>
styles.css
Copy
html, body { width:100%; height:100%; background:#000; position:relative; overflow:hidden; } .container { font-size:40px; font-family: 'Red Hat Display', sans-serif; letter-spacing:1.5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:600px; height:40px; } .container * { display:inline-block; overflow:hidden; position:absolute; } .bar { width:3px; height:49px; position:absolute; top:-1px; }
main.js
Copy
var t2 = new SplitText('.txt2').chars, color2 = '#17c0fd', color1 = '#fff', moveBar = ()=>{ gsap.set('.bar', {left:gsap.getProperty('.txt1','width') + 1}) }; gsap.timeline({delay:0.2}) .set('.txt1', {color:color1, fontWeight:'regular'}) .set('.txt2', {color:color2, fontWeight:'bold', opacity:0, x:gsap.getProperty('.txt1','width')-2, immediateRender:true}) .set('.bar', {left:1, backgroundColor:color1, immediateRender:true}) .to('.bar', {duration:0.1, opacity:0, ease:Expo.easeIn, yoyo:true, repeat:5, repeatDelay:0.3}, 0) .from('.txt1', {duration:1.1, width:0, ease:SteppedEase.config(14), onUpdate:moveBar}, 2.5) .to('.bar', {duration:0.05, backgroundColor:color2}, '+=0.15') .to('.bar', {duration:1.0, width:290, ease:Power4.easeInOut}, '+=0.1') .from('.container', {duration:1.0, x:135, ease:Power4.easeInOut}, '-=1.0') .to('.txt2', {duration:0.01, opacity:1}, '-=0.1') .to('.bar', {duration:0.4, x:290, width:0, ease:Power4.easeIn}) .from(t2, {duration:0.6, opacity:0, ease:Power3.easeInOut, stagger:0.02}, '-=0.5') .to('.txt1', {duration:1.5, opacity:0.25, ease:Power3.easeInOut}, '-=1.2') .timeScale(1.45)
