차근차근/HTML CSS

스크롤위치에 따라 화면변경, 애플처럼

예쁜꽃이피었으면 2023. 10. 4. 15:50

https://youtu.be/e4Afka5IOZ8?si=kkP0wfcXlt6260rJ 

IntersectionObserver라는 기본기능인데 자바스크립트 싫어하면 나중에 scroll timeline 씁시다.

 

 

 

 

 

 

 

 


[스크롤 js]

https://michalsnik.github.io/aos/

 

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

https://github.com/michalsnik/aos?tab=readme-ov-file#animations

 

GitHub - michalsnik/aos: Animate on scroll library

Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub.

github.com

AOS 스크롤 애니메이션 라이브러리 - Animate On Scroll
https://inpa.tistory.com/entry/AOS-%F0%9F%93%9A-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-Animate-On-Scroll

 

📚 AOS 스크롤 애니메이션 라이브러리 - Animate On Scroll

AOS (Animate On Scroll) 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우, AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있다. AOS 라이브러리는 자바스크립트를 깊게

inpa.tistory.com

https://be-c.kr/magazineDetail.php?b_cd=magazine&idx=137

 

Be:C | 스크롤 애니메이션 라이브러리 AOS

스크롤 애니메이션 효과를 줄 수 있는

be-c.kr

https://turfrain.tistory.com/entry/1-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%82%B4%EB%A6%AC%EB%A9%B4-%EC%9E%90%EB%8F%99%EB%A1%9C%EB%93%9C

 

[패럴랙스] 스크롤 관련 페이지 전환

# 스크롤에따라 움직임에 따라 모션시작 (css3) ie10 HTML 삽입 미리보기할 수 없는 소스 # 스크롤 에따른 속도 움직임 효과 : http://prinzhorn.github.io/skrollr/ # 스크롤양 에따른 움직임 효과 : https://scrollma

turfrain.tistory.com

https://whales.tistory.com/157

 

AOS 라이브러리 사용법 알아보기(feat.스크롤 애니메이션)

단순한 정보를 제공하던 정적인 웹 화면에서 이제는 정보제공은 물로 다양한 인터렉션과 애니메이션 효과까지 적용된 웹 화면들이 늘어나고 있습니다. 오히려 정적인 웹 화면을 찾는 게 더 힘

whales.tistory.com

 

 

 

 

 

 

 

 

https://pushinjs.com/

 

PushIn.js

 

pushinjs.com

 

https://prinzhorn.github.io/skrollr/

 

skrollr - parallax scrolling for the masses

all numeric properties width, height, padding, font-size, z-index, blah blah blah

prinzhorn.github.io

 

https://scrollmagic.io/

 

ScrollMagic

The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user's current scroll position.

scrollmagic.io

 

https://github.com/victa/curtain.js

 

GitHub - Victa/curtain.js: PROJECT IS NOT MAINTAINED - This plugin allows you to create a web page with multiple fixed panels th

PROJECT IS NOT MAINTAINED - This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. - Victa/curtain.js

github.com

 

반응형