ParallaxScroll

Type : Constructor

Support : 1.0

Extend : $B.utils.Between

  • Parallax Scroll 이벤트 검출기

Methods

  • ParallaxScroll( positions, scrollType, scrollTarget )

    ParallaxScroll 생성
    • positions : Array
      포지션 데이타 배열, [{min:Number, max:Number, data:*}, ...
    • scrollType : String
      vertical, horizontal (기본값 vertical)
    • scrollTarget : ElementSelectorjQuery

  • update( positions ) : ParallaxScrollver 1.0~

    포지션 데이타 갱신
    • positions : Array
      포지션 데이타 배열, [{min:Number, max:Number, data:*}, ...

  • trigger() : ParallaxScrollver 1.0~

    강제로 실행시킬때 사용, 포지션 데이타 갱신 이후에 주로 사용

  • enable() : ParallaxScrollver 1.0~

    ParallaxScroll 검출 허용 설정

  • disable() : ParallaxScrollver 1.0~

    ParallaxScroll 검출 비허용 설정

  • clear() : ParallaxScrollver 1.0~

    이벤트 및 기본설정 삭제

Events

No. type description property ver
1 activate 구간에 진입시 한번만 발생
  • index: 현재 구간의 배열 index
  • data: positons에 등록했던 각 data들
  • percent: 구간에서의 scroll 진행률값 0~1
  • totalPercent: 전체 구간에서의 scroll 진행률값 0~1
  • value: 해당 시점의 scrollTop이나 scrollLeft값
 1.0
2 between 구간에 진입시 계속해서 발생
  • index: 현재 구간의 배열 index
  • data: positons에 등록했던 각 data들
  • percent: 구간에서의 scroll 진행률값 0~1
  • totalPercent: 전체 구간에서의 scroll 진행률값 0~1
  • value: 해당 시점의 scrollTop이나 scrollLeft값
 1.0
3 deactivate 전체 구간에서 벗어날시 한번만 발생
  • index: 이전 activate 구간의 배열 index
  • data: positons에 등록했던 각 data들
  • percent: 구간에서의 scroll 진행률값 0~1
  • totalPercent: 전체 구간에서의 scroll 진행률값 0~1
  • value: 해당 시점의 scrollTop이나 scrollLeft값
 1.0

Example

var positions = [{min:100, max:300, data:'test1'}, {min:310, max:500}];

var pScroll = new $B.event.ParallaxScroll( positions )
        .addListener( 'activate', pScrollHandler )
        .addListener( 'between', pScrollHandler )
        .addListener( 'deactivate', pScrollHandler );


function pScrollHandler (e) {
    console.log( e.type, e.index );
}