gcerceo Posted March 29 Share Posted March 29 Hi, I'm hoping to implement this Codepen onto my website in the section below my hero, to reveal fade in/out this description. Follow up question is, does mobile affect it at all? codepen: https://codepen.io/gusevdigital/pen/dygLbqJ my site: https://www.grahamcerceo.com Thanks SS Superstars! Link to comment
tuanphan Posted March 31 Share Posted March 31 Try edit page where you want to apply this > Add a Block > Choose Code > Paste this code <div class="app"> <section> <div class="container"> <p class="reveal">In the vastness of space, celestial bodies dance in harmony. Stars twinkle, planets orbit, and nebulas paint vibrant hues. Black holes exert their gravitational might, while comets streak by, leaving stardust in their wake.</p> </div> </section> </div> <style> .lenis.lenis-smooth { scroll-behavior: auto; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } section { display: flex; align-items: center; justify-content: center; min-height: 100vh; } .app .container { position: relative; max-width: 90%; margin: 0 auto; } .reveal { font-kerning: none; text-transform: uppercase; font-weight: 300; font-size: 1.4rem; line-height: 1.4; } </style> <script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.23/bundled/lenis.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); let revealAnimations = []; // Scroll const lenis = new Lenis({ lerp: 0.07 }); lenis.on('scroll', ScrollTrigger.update) gsap.ticker.add((time)=>{ lenis.raf(time * 1000) }) // Reveal document.querySelectorAll('.reveal').forEach(text => { // Split text let splitText = new SplitType(text, { type: 'words' }) // Animation const section = text.closest('section'); gsap.from(splitText.words, { opacity: 0, ease: 'none', stagger: 1, duration: 5, scrollTrigger: { trigger: section, start: 'top top', end: () => `+=${window.innerHeight * 5}px`, scrub: true, // markers: true, pin: true, } }) }) </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
gcerceo Posted April 3 Author Share Posted April 3 This is great, thank you! Need to do some tweaking to make it work. How can we keep the code box from being so long and making the section so long, after inputting all that code into it? And, I'd like to make the text my H2 size. Link to comment
gcerceo Posted April 4 Author Share Posted April 4 (edited) O, just realized the effect is not fading in or out with the scroll up or down the page. The page is smooth scrolling though, and that's nice. The effect I'm going for is more like a status bar scroll, with the copy fading in/out when the viewport reaches that section. Does that make sense? And it's all screwed up on mobile, I'll need to add a parameter for it to resize the copy for the mobile version. https://www.grahamcerceo.com/ Edited April 5 by gcerceo Link to comment
gcerceo Posted May 22 Author Share Posted May 22 @tuanphan circling back on this scrolling/fade effect seen here >> www.grahamcerceo.com Link to comment
Evergrace1 Posted June 6 Share Posted June 6 I would like to do simple scroll reveal for content within my homepage. Is there a standard CSS for this? Evergracechurch.com Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment