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

# 스크롤에따라 움직임에 따라 모션시작 (css3) ie10<=

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

 

 

 

<div

    data-aos="fade-up"

    data-aos-offset="120"

    data-aos-delay="0"

    data-aos-duration="400"

    data-aos-easing="ease"

    data-aos-mirror="false"

    data-aos-once="false"

    data-aos-anchor-placement="top-bottom"

  >

  </div>

<script>

   AOS.init({

      easing: 'ease-in-out-sine'

   });

</script>

 

속성	설명	옵션값
data-aos	모션 타입	fade-(up, down, left, fight, up-right, up-left, down-right, down-left)  flip-(up, down, left, right)  slide-(up, down, left, right)  zoom-(in-, out-)
data-aos-offset	앵커시점에서 픽셀제어	(number)px
data-aos-delay	지연시간	1000 = 1ms
data-aos-duration	모션 시간	1000 = 1ms
data-aos-easing	모션 테션	ease-in-(back, sine, quad, cubic, quart)  ease-out-(back, sine, quad, cubic, quart)  ease-in-out-(back, sine, quad, cubic, quart)
data-aos-mirror	요소를지나 스크롤하는 동안 애니메이션을 적용할지 여부	true or false
data-aos-once	스크롤하는 동안 한번만 실행될지 여부	true or false
data-aos-anchor-placement	모션 시작 시점 정의 (컨텐츠 / 브라우져)	top-(top, center, bottom) center-(top, center, bottom)  bottom-(top, center, bottom)
data-aos-anchor	모션 시작 시첨 선택자	#id, .class

 

 

 

# 스크롤 에따른 속도 움직임 효과
- Demo : https://pushinjs.com/
- API : https://pushinjs.com/api
- github : https://github.com/nateplusplus/pushin

 

 

 

 

# 스크롤 에따른 속도 움직임 효과 : http://prinzhorn.github.io/skrollr/

 

 

 

 

 

# 스크롤양 에따른 움직임 효과 : https://scrollmagic.io/

 

 

 

 

# 사용자 정의 스크롤 경로 (곡선 포함) 그릴 수있는 플러그인

http://joelb.me/scrollpath/

 

 

 

# 스크롤 에따른 페이지 움직임 효과 (커튼)

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

 

 

 

 

 

 

# jquery 모션효과?http://johnpolacek.github.io/superscrollorama/

 

 

 

 

 

 

# 최근

https://github.com/markdalgleish/stellar.js/   

 

 

 

# 스크롤효과

demo : https://locomotivemtl.github.io/locomotive-scroll/
api : https://www.cssscript.com/animate-scroll-parallax-locomotive/