스크롤시 해당 코드의 애니메이션이 실행되게 하고싶습니다.

본문 바로가기

스크롤시 해당 코드의 애니메이션이 실행되게 하고싶습니다.

작성일 2023.05.09댓글 1건
    게시물 수정 , 삭제는 로그인 필요

https://codepen.io/equinusocio/pen/KNYOxJ

현재 기존 홈페이지는 풀페이지스크린인데 각 세션으로 스크롤 이동이 되면 해당 코드의 모션이 동작되게 하고싶어요..ㅠㅠ



profile_image 익명 작성일 -

안녕하세요?

javascript로 스크롤 이벤트를 캡쳐하여 사용하면 간단하게 구현가능합니다.

아래 코드는 스크롤 이동으로 도달한 각 element에 모션이 나타나도록 만든 샘플코드입니다.

각 element별로 모션만 바꾸어서 사용해보세요.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style> * { padding:0; margin:0; } :root { --delay: 0; --duration: 800ms; --iterations: 1; } /* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */ .reveal-text, .reveal-text::after { animation-delay: var(--animation-delay, 2s); animation-iteration-count: var(--iterations, 1); animation-duration: var(--duration, 800ms); animation-fill-mode: both; animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1); } .reveal-text { --animation-delay: var(--delay, 0); --animation-duration: var(--duration, 800ms); --animation-iterations: var(--iterations, 1); position: relative; font-size: 10vw; animation-name: clip-text; color: #FFF; white-space: nowrap; cursor: default; &::after { content: ""; position: absolute; z-index: 999; top: 0; left: 0; right: 0; bottom: 0; background-color: #f2f98b; transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; animation-name: text-revealer; } } @keyframes clip-text { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes text-revealer { 0%, 50% { transform-origin: 0 50%; } 60%, 100% { transform-origin: 100% 50%; } 60% { transform: scaleX(1); } 100% { transform: scaleX(0); } } .w { display:flex; flex-direction: column; } .a { height:100vh; width:100%; background:#333; color:#fff; box-sizing: border-box; align-items: center; text-align: center; font-size: 10vw; } </style> </head> <body> <div class="w"> <div class="a reveal-text">I'm here.</div> <div class="a">I'm here.</div> <div class="a">I'm here.</div> </div> <script> const scrollElements = document.querySelectorAll(".a"); var throttleTimer; const throttle = (callback, time) => { if (throttleTimer) return; throttleTimer = true; setTimeout(() => { callback(); throttleTimer = false; }, time); } const elementInView = (el, dividend = 1) => { const elementTop = el.getBoundingClientRect().top; return ( elementTop < (window.innerHeight || document.documentElement.clientHeight) / dividend ); }; const elementOutofView = (el) => { const elementTop = el.getBoundingClientRect().top; return ( elementTop >= (window.innerHeight || document.documentElement.clientHeight) ); }; const displayScrollElement = (element) => { element.classList.add("reveal-text"); }; const hideScrollElement = (element) => { element.classList.remove("reveal-text"); }; const handleScrollAnimation = () => { scrollElements.forEach((el) => { if (elementInView(el, 1.25)) { displayScrollElement(el); } else if (elementOutofView(el)) { hideScrollElement(el) } }) } window.addEventListener("scroll", () => { throttle(() => { handleScrollAnimation(); }, 250); }); </script> </body> </html>

결과 확인은 다음 링크에서 가능합니다.

https://jsfiddle.net/xxxvvvxxx/4oLh3jx9/

Edit fiddle - JSFiddle - Code Playground

Start with a boilerplate: jQuery Vue React React + JSX Preact TypeScript CoffeeScript SCSS CSS Grid Bootstrap PostCSS Links:  Roadmap (vote for features)  Bug tracker  Docs  Service status Support JSFiddle and get extra features Groups, Private fiddles, Ad-free & more JSFiddle is for: Demos for...

jsfiddle.net

Ref.

https://indifference.com/collage/category/programming-8

콜라주 - Programming | Phenomena

n. A piece of art made by sticking various different materials aka PHENOMENA Magazine - PHENOMENA

indifference.com

​

연관된 질문 답변 리스트

온라인 게임실행시 응답 없음이...

... 겜임도 하고 다시 중국에 와서 겜임을 하는데 실행이... 해당 파일을 찾아서 지우고 키를 눌러 재부팅한다. 16... PC를 끈 뒤 전원 코드를 뽑고 케이스를 연다. 랜카드를...

중국 악성코드 wordict.exe 이것 좀 제...

... 영구적인 해결책을 알고 싶습니다. 꼭 좀 도와 주셨으면 좋겠습니다.. (ㅠㅠ)(_ _) P. S 혹시 악성코드나... 3분의2지점으로 스크롤바를 내려 (아래그림을 참고) "타사...

악성코드때문에 미치겠습니다

... 스크롤 2/3지점의 '서명된 ActiveX 컨트롤 다운로드'를... 프로그램 실행을 요구하는 페이지 접속 시 설치... 듯 싶습니다. 해당 글은 지식스폰서가 활동 기간 (04년~08년...

에니에 어떤것들이 있는지알고 싶습니다.

... 했답니다 스크롤 압박이 있으니 염두 해주세요 . 이렇게 많이 쓴 공포 호러 잔인 코드로 만화 리스트는 없으리라... 장편 애니메이션만 무려 다섯 차례 제작될 정도로...