( HTML / CSS / javascript / jQuery ) 스크롤 매직 예제 - setPin 을 이용하여 스크롤하면서 요소 고정시키기.

See the Pen Scrollmagic - set pin by kimyangsun (@kimyangsun) on CodePen.

https://codepen.io/kimyangsun/pen/gObQXXw

Scrollmagic - set pin

스크롤 매직 플러그인을 사용한 예제입니다.

 

스크롤 매직 스크립트에서 setPin 을 이용하여 요소를 고정시키면서 스크롤이 되도록 하였습니다.

(요소는 고정시키면서 스크롤은 가능하도록)

 

지정한 수만큼 요소가 고정되고 그 후에는 다시 요소는 내려갑니다.

(밑에 요소들과 겹치지 않습니다. - 그만큼 스크롤이 늘어나기 때문에)

 

사용법을 잘 익혀놓는다면 후에 유용하게 사용할 수 있을 것 같습니다.

 

자세한 코드는 위에 코드팬 또는 링크를 통해 들어가서 확인할 수 있습니다.