Last active
February 21, 2025 07:31
-
-
Save baslie/7b27b0d020e1d30429b3a34dfd89a0fc to your computer and use it in GitHub Desktop.
Плавное отображение текста
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
| <!-- ********************************************************************** --> | |
| <!-- Плавное отображение текста --> | |
| <!-- ********************************************************************** --> | |
| <!-- | |
| settings { | |
| "elemClass": "uc-text-animation", | |
| "speedText": "0.3", | |
| "bgColorTextAnimation": "#F8F7F8", | |
| "opacityText": "0.8", | |
| "textColor": "#002EFE" | |
| } | |
| --> | |
| <style> | |
| .line { | |
| color: #002EFE; | |
| position: relative; | |
| } | |
| .line-mask { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| background-color: #F8F7F8; | |
| opacity: 0.8; | |
| transition-duration: 0.3s; | |
| height: 100%; | |
| width: 100%; | |
| z-index: 2; | |
| } | |
| </style> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script> | |
| <script src="https://unpkg.com/split-type"></script> | |
| <script> | |
| function checkElement() { | |
| if (document.querySelectorAll('.uc-text-animation .tn-atom').length > 0) { | |
| clearInterval(checkElementInterval); | |
| initAnimation(); | |
| } | |
| } | |
| let checkElementInterval = setInterval(checkElement, 100); | |
| setTimeout(() => clearInterval(checkElementInterval), 5000); | |
| function initAnimation() { | |
| const atoms = document.querySelectorAll('.uc-text-animation .tn-atom'); | |
| atoms.forEach(atom => atom.classList.add("split-mt")); | |
| let typeSplit; | |
| function runSplit() { | |
| typeSplit = new SplitType(".split-mt", { types: "lines, words" }); | |
| document.querySelectorAll(".line").forEach(el => { | |
| if (!el.querySelector('.line-mask')) { | |
| const mask = document.createElement('div'); | |
| mask.className = "line-mask"; | |
| el.appendChild(mask); | |
| } | |
| }); | |
| createAnimation(); | |
| } | |
| runSplit(); | |
| let windowWidth = window.innerWidth; | |
| window.addEventListener("resize", function() { | |
| if (windowWidth !== window.innerWidth) { | |
| windowWidth = window.innerWidth; | |
| typeSplit.revert(); | |
| runSplit(); | |
| } | |
| }); | |
| gsap.registerPlugin(ScrollTrigger); | |
| function createAnimation() { | |
| document.querySelectorAll(".line").forEach(el => { | |
| let tl = gsap.timeline({ | |
| scrollTrigger: { | |
| trigger: el, | |
| start: "top center", | |
| end: "bottom center", | |
| scrub: 1 | |
| } | |
| }); | |
| tl.to(el.querySelector(".line-mask"), { width: "0%", duration: 1 }); | |
| }); | |
| } | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment