스크롤 매직
ScrollMagic은 사용자의 스크롤 위치에
반응하여 효과가 나타나게 함.
스크롤 하면 이미지가 나타나거나, 사라지거나 하는등의 효과를
구현할 수 있게 해주는데 대표적으로 애플 홈페이지 같은 느낌 만들기에 필요한 플러그인
사용방법
- 홈페이지에서 플러그인 다운로드
- examples 폴더내에 index.html 열기
- <head></head> 안에 css/script 경로 확인
홈페이지에서 다운로드 받아서 샘플을 보고 필요한 요소를 찾아 쓰면 된다.
ScrollMagic
The javascript library for magical scroll interactions. ScrollMagic helps you to easily react to the user's current scroll position.
scrollmagic.io
플러그인 중복 사용
example 폴더 내 index.html 파일을 열어보면
트윈맥스 등 일부 플러그인이 또 들어있다.
여튼 급하면 그냥 소스 그대로 다 긁어와서 쓰는게 가장 확실한 방법일 듯 하다.
<script type="text/javascript" src="../assets/js/lib/greensock/TweenMax.min.js"></script>
<script type="text/javascript" src="../assets/js/lib/jquery.min.js"></script>
<script type="text/javascript" src="../assets/js/examples.js"></script>
<script type="text/javascript" src="../assets/js/lib/highlight.pack.js"></script>
<script type="text/javascript" src="../assets/js/lib/modernizr.custom.min.js"></script>
<script type="text/javascript" src="../scrollmagic/uncompressed/ScrollMagic.js"></script>
<script type="text/javascript" src="../scrollmagic/uncompressed/plugins/debug.addIndicators.js">
활용예제
이 좋은 플러그인 사용법만 충분히 익히고 있으면,,
액티브한, 스토리 텔링이 가능한 홈페이지를 쉽게 구현할 수 있다.
애플 웹사이트 처럼!
추후 시간이 되면 이를 활용한 페이지를 제작해 보는 것도 좋을듯.
활용 샘플 페이지로 중앙일보 이노베이션랩 에 가보면 다양한 상품을 스토리 텔링 형식으로 표현하고 있다.
https://innovationlab.co.kr/project/2020simmons2/
소스를 확인하면 스크롤매직이 들어가 있다.
728x90
반응형
'퍼블리싱' 카테고리의 다른 글
| [CSS 활용] 투명한 스크롤바 - 내용위에 오버레이 되는 스크롤바 (0) | 2022.01.17 |
|---|---|
| HTML&CSS 기초 - 요약 (의미,특징,사용법) (0) | 2022.01.16 |
| [JS 활용]숫자가 카운팅/카운트 되게 하는 제이쿼리 소스 (0) | 2021.11.17 |
| 깜박이는 효과, on-air 라이브 중 상태 (가상요소,애니메이션효과) (0) | 2021.11.17 |
| [HTML 태그 활용]버튼 클릭시 이미지 다운로드 되는 버튼 만들기 (0) | 2021.10.13 |
댓글