gsap结合ScrollSmoother, ScrollTrigger, SplitText实现滚动文字高亮显示效果代码
代码语言:html
所属分类:加载滚动
代码描述:gsap结合ScrollSmoother, ScrollTrigger, SplitText实现滚动文字高亮显示效果代码展翅动画效果代码
代码标签: gsap ScrollSmoother ScrollTrigger SplitText 滚动 文字
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Cabin&display=swap'> <style> .text { font-size: 3.8rem; max-width: 800px; } .text__word { opacity: 0.2; } .section { align-items: center; display: flex; height: 100vh; justify-content: center; padding: 0 2rem; } body { background-color: #111; color: #fff; font-family: "Cabin", sans-serif; } </style> </head> <body> <main id="smooth-content"> <section class="section">Scroll a little</section> <section class="section"> <p class="text" id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt aliqua. Ut enim minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </section> <section class="section">Following content</section> </main> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Sp.........完整代码请登录后点击上方下载按钮下载查看
网友评论0