sticky를 활용하여 텍스트 순서대로 이미지가 바뀌게 하는 gsap 효과는 어떻게 구현할 수 있을까요?
CSS 25.08.04sticky 활용으로 텍스트 순서대로 이미지 바꾸게 하는 gsap 효과란?
sticky 활용으로 텍스트 순서대로 이미지가 바뀌는 gsap 효과의 가장 큰 이유는 사용자의 스크롤 흐름에 맞춰 자연스럽고 직관적인 콘텐츠 변화를 제공하기 때문입니다. 이 효과는 스크롤 위치에 따라 텍스트가 고정(sticky)되면서 연동된 이미지가 순서대로 전환되어 시각적 집중도를 높입니다.
➰➰➰
✨ sticky 활용으로 텍스트 순서대로 이미지 바꾸게 하는 gsap 효과 구현의 주요 장점
스크롤할 때 텍스트가 화면에 고정(sticky)되고, 사용자가 스크롤해서 각 텍스트 구간에 도달할 때마다 연동된 이미지가 순서대로 자연스럽게 전환되는 인터랙션입니다.
즉, 텍스트와 이미지가 스크롤 위치에 맞춰 연동되어 시각적으로 몰입감 있는 콘텐츠 전환 효과를 보여줍니다.
✏️기본 HTML & CSS 구조
텍스트 영역은 .sticky 클래스를 가진 div로 만들고, CSS에서 position: sticky; top: 100px; 등으로 스크롤 시 고정합니다.
이미지들은 겹쳐서 배치하고, 기본적으로 모두 불투명도 0으로 설정 후, gsap으로 현재 구간에 맞는 이미지만 opacity 1로 바꿔줍니다.
⌨️주요 html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <article id="inc03"> <div class="cont"> <div class="img_inner"> <ul class="img_box"> //배경 <li class="bg01 bg"></li> <li class="bg02 bg"></li> <li class="bg03 bg"></li> </ul> </div> <ul class="txt_box"> //텍스트 <li> <h2>고속 메모리 솔루션 (DRAM / NAND)</h2> <div class="pl">데이터 처리 속도와 안정성을 극대화한 고성능 메모리 제품으로 모바일, 서버, 데이터센터 등 다양한 환경에 최적화된 DRAM 및 NAND 솔루션을 제공합니다.</div> <a href="" class="cm_btn">자세히 보기 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg></a> </li> <li> <h2>고집적 시스템 반도체 (SoC)</h2> <div class="pl">CPU, GPU, 메모리 컨트롤러 등 핵심 기능을 하나의 칩에 통합한 SoC 기술로, 모바일·가전·자동차 전장까지 다양한 분야의 소형화와 고성능화를 실현합니다.</div> <a href="" class="cm_btn">자세히 보기 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg></a> </li> <li> <h2>초미세 파운드리 기술 (5nm / 3nm)</h2> <div class="pl">에너지 효율과 연산 성능을 극대화하는 5나노, 3나노급 파운드리 공정을 통해 차세대 AI, 모바일, 고성능 컴퓨팅 분야의 요구를 충족합니다.</div> <a href="" class="cm_btn">자세히 보기 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg></a> </li> </ul> </div> </article> | cs |
⌨️주요 css
1 2 3 4 5 6 7 | #inc03 .img_inner{position:sticky;top:0;z-index:0;overflow:hidden} #inc03 .img_box{overflow:hidden;position:relative;width:100%;height:100vh;margin:0 auto} #inc03 .img_box li{opacity:.7;position:absolute;top:50%;left:50%;width:100%;height:100vh;transform:translate(-50%, -50%) scale(1.1);transition:all 2s cubic-bezier(0.165, 0.840, 0.440, 1);background-position:center;background-size:cover} #inc03 .img_box li.on{opacity:1;z-index:10;transform:translate(-50%, -50%) scale(1)} #inc03 .img_box li.bg01{background-image:url('https://co1162-res.shiningcorp.com/sh_img/include/inc03/img/img01.jpg')} #inc03 .img_box li.bg02{background-image:url('https://co1162-res.shiningcorp.com/sh_img/include/inc03/img/img02.jpg')} #inc03 .img_box li.bg03{background-image:url('https://co1162-res.shiningcorp.com/sh_img/include/inc03/img/img03.jpg')} | cs |
⌨️주요 script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | gsap.registerPlugin(ScrollTrigger); const imgs = document.querySelectorAll(".img_box li"); const texts = document.querySelectorAll(".txt_box li"); const lastIndex = texts.length - 1; // 초기 세팅: 첫번째 이미지, 텍스트 on imgs.forEach(img => img.classList.remove("on")); texts.forEach(text => text.classList.remove("on")); imgs[0].classList.add("on"); texts[0].classList.add("on"); texts.forEach((text, i) => { ScrollTrigger.create({ trigger: text, start: "top 40%", end: "bottom 30%", onEnterBack: () => { // 스크롤 올릴 때 해당 텍스트가 화면에 들어오면 setActive(i); }, onLeave: () => { // 스크롤 내릴 때 해당 텍스트가 화면에서 완전히 지나가면 if(i < lastIndex) setActive(i + 1); } }); }); function setActive(index) { imgs.forEach(img => img.classList.remove("on")); texts.forEach(text => text.classList.remove("on")); imgs[index].classList.add("on"); texts[index].classList.add("on"); } | cs |
✅활용 팁과 주의사항
레이아웃 유연성 확보
sticky 요소가 제대로 동작하려면 부모 컨테이너가 적절한 높이를 가져야 하며, z-index 조절로 이미지와 텍스트의 겹침 문제를 해결해야 합니다.
반응형 고려
화면 크기별로 sticky 위치와 이미지 크기를 조정하여 모바일 및 태블릿에서도 자연스럽게 동작하도록 설계하세요.
성능 최적화
이미지가 많을 경우, gsap 애니메이션이 부드럽도록 미리 로드와 메모리 관리를 신경 써야 합니다.
sticky와 gsap을 활용한 텍스트 순서대로 이미지 바꾸는 효과는
사용자 경험을 크게 향상시키는 현대적인 웹 인터랙션 방법입니다.
본 가이드를 참고해 나만의 웹페이지에 효과적으로 적용해보세요!
