uyeong / stepperjs Goto Github PK

Spec of Stepper

사용자는 Stapper 클래스의 새로운 인스턴스를 생성할 수 있다.

• new 키워드로 인스턴스를 생성하면 새로운 인스턴스가 생성된다.
• 옵션 인자를 생략하면 기본 옵션으로 설정된 인스턴스가 생성된다.
• 옵션 인자를 전달하면 전달한 옵션으로 설정된 인스턴스가 생성된다.

사용자는 stepper 객체의 option() 메서드를 이용해 옵션 값을 변경할 수 있다.

• 옵션명과 값을 전달하면 지정한 옵션이 변경된다.
• 옵션명과 값 셋을 객체로 전달하면 여러개의 옵션이 일괄로 변경된다.

사용자는 stepper 객체의 on() 메서드를 이용해 이벤트 리스너를 등록할 수 있다.

• 이벤트명과 리스너를 전달하면 지정한 이벤트 리스너가 등록된다.
• 이벤트명과 리스너 셋을 객체로 전달하면 여러개의 이벤트 리스너가 등록된다.

사용자는 stepper 객체의 off() 메서드를 이용해 이벤트 리스너를 해제할 수 있다.

• 이벤트명과 리스너를 전달하면 지정한 이벤트 리스너가 해제된다.
• 아무것도 전달하지 않으면 이벤트 리스너가 모두 해제된다.

사용자는 stepper 객체의 start() 메서드를 이용해 progress 계산을 시작할 수 있다.

• progress 계산이 시작되면 start 이벤트가 발생된다.
• duration을 1 이상 설정 했을 때만 progress 계산이 시작된다.
• 계산 중이 상태가 아닐 때만 progress 계산이 시작된다.
• progress 값이 바뀔때마다 현재 progress 값과 함께 update 이벤트가 발생된다.
• reverse 옵션을 true로 설정하면 progress 값이 거꾸로 계산된다.
• loop 옵션을 true로 설정하면 progress 계산이 반복된다.
• progress 계산이 끝나면 ended 이벤트가 발생된다.
• progress 계산이 끝나면 더이상 update 이벤트가 발생하지 않는다.

사용자는 stepper 객체의 pause() 메서드를 이용해 progress 계산을 일시 정지할 수 있다.

• progress 계산이 일시 정지 되면 paused 이벤트가 발생된다.
• 일시 정지 상태가 아닐 때만 progress 계산이 일시 정지된다.
• progress 계산이 일시 정지되면 update 이벤트가 발생하지 않는다.
• 일시 정지 상태에서 play() 메서드를 호출하면 progress 계산이 이어서 시작된다.

사용자는 stepper 객체의 stop() 메서드를 이용해 progress 계산을 중지할 수 있다.

• progress 계산이 중지되면 stoped 이벤트가 발생된다.
• 중지 상태가 아닐 때만 progress 계산이 중지된다.
• progress 계산이 중지되면 더이상 update 이벤트가 발생하지 않는다.
• 일시 중지 상태에서 stop() 메서드를 호출하면 계산이 중지된다.

I want to create a slideshow with stacked images that quickly change z-index via controlling that with JS. (like stop animate via images)

I though instead of just applying a setInterval to each image changing the z-index of each indididual image that another one is on top, I'd better use this.

is it a good use case?

How do I limit the amount of update ticks to be equal to the amount of images over a duration I choose?