Guardefi
/ index.html
Created
September 20, 2025 00:54
ScrollTrigger Line Reveal Animation – Text & Parallax Image Blend ✨
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="preview"> | |
| <img src="https://bato-web-agency.github.io/bato-shared/img/text-drop-preview.jpg?v=1.0"> | |
| </div> | |
| <!-- Start Screen --> | |
| <section class="start"> | |
| <div class="start__box"> | |
| <a href="https://bato.dev" target="_blank" title="Bato Web Agency" class="start__logo"> | |
| <img src="https://bato-web-agency.github.io/bato-shared/img/text-gsap/logo.svg" alt="Bato Web Agency" width="120" height="30"> |
Guardefi
/ index.html
Created
September 17, 2025 04:48
ScrollTrigger Line Reveal Animation – Text & Parallax Image Blend ✨
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="preview"> | |
| <img src="https://bato-web-agency.github.io/bato-shared/img/text-drop-preview.jpg?v=1.0"> | |
| </div> | |
| <!-- Start Screen --> | |
| <section class="start"> | |
| <div class="start__box"> | |
| <a href="https://bato.dev" target="_blank" title="Bato Web Agency" class="start__logo"> | |
| <img src="https://bato-web-agency.github.io/bato-shared/img/text-gsap/logo.svg" alt="Bato Web Agency" width="120" height="30"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1 class="header__title"> | |
| <div class="header__static-text">Embrace the</div> | |
| <div class="header__static-text"> | |
| power to | |
| </div> | |
| <div class="header__word-container"> | |
| <div data-ref="header-word">inspire</div> | |
| <div data-ref="header-word">innovate</div> | |
| <div data-ref="header-word">transform</div> | |
| <div data-ref="header-word">elevate</div> |
Guardefi
/ css-text-animation-effect-using-gsap-gsap-tutorials.markdown
Created
September 17, 2025 03:40
CSS Text Animation Effect Using GSAP | GSAP Tutorials
A Pen by Vijay Shinde on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1 id="title">SPIDOCHE LOVE <span>HTML</span><b id="cursor">_</b></h1> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .particle-network-animation | |
| -# .glow.glow-1 | |
| -# .glow.glow-2 | |
| -# .glow.glow-3 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- div .wrapp --> | |
| <div id="luxy" class="wrapp"> | |
| <!-- div .header --> | |
| <header class="header"> | |
| <h1 class="title" data-splitting><span class="title_paralax">Parallax effect</span><span class="stroke">on | |
| gsap</span></h1> | |
| <div class="header__img"> | |
| <img src="img/1.jpg" alt="1"> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- div .wrapp --> | |
| <div id="luxy" class="wrapp"> | |
| <!-- div .header --> | |
| <header class="header"> | |
| <h1 class="title" data-splitting><span class="title_paralax">Parallax effect</span><span class="stroke">on | |
| gsap</span></h1> | |
| <div class="header__img"> | |
| <img src="img/1.jpg" alt="1"> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- div .wrapp --> | |
| <div id="luxy" class="wrapp"> | |
| <!-- div .header --> | |
| <header class="header"> | |
| <h1 class="title" data-splitting><span class="title_paralax">Parallax effect</span><span class="stroke">on | |
| gsap</span></h1> | |
| <div class="header__img"> | |
| <img src="img/1.jpg" alt="1"> | |
| </div> |
NewerOlder