3.6.2 • Published 5 years ago
scrollmagic-sequencer v3.6.2
scrollmagic-image-sequencer-plugin
Progress-sync image sequencer for Scrollmagic Scene
Usage
- install Scrollmagic
npm i --save scrollmagic
- instal image sequencer plugin
npm i --save scrollmagic-sequencer
- import modules
import ScrollMagic from 'scrollmagic'
import 'scrollmagic-sequencer'
- add sequencer for scene
let controller = new ScrollMagic.Controller()
let scene = new ScrollMagic.Scene()
let sequencer = scene.addImageSequencer({
canvas: document.querySelector('#canvas'), // canvas node
from: '/path/to/first-frame.jpg',
to: '/path/to/last-frame.jpg',
})
scene.addTo(controller)
// Methods
sequencer.stopDrawing()
sequencer.resumeDrawing()
sequencer.resize(width, height)
Options
{
canvas: null, // canvas node ( canvas or img )
canvasContext: 'auto', // can be: auto, webgl, 2d
from: '', // path to first frame
to: '', // path to last frame
asyncLoader: false, // sequential loading of images ( false, true, number of
frames )
scaleMode: 'cover', // as in CSS3, can be: auto, cover, contain
framePosition: 'center center', // x-axis: left, right, center; y-axis: top, bottom, center
hiDPI: true,
initFrameDraw: true, // drawing frame after sequencer init
totalLoadCallback: () => {}, // callback after loading all frames
imageLoadCallback: ({ img, frame }) => {} // callback after loading each frame
}
Based on Andreas Gysin Sequencer
Changes
3.6.2 Fix webgl canvas context
3.6.0 Add canvasContext option (yes, the plugin supports webgl now)
3.6.2
5 years ago
3.7.0-beta.4
5 years ago
3.7.0-beta.3
5 years ago
3.7.0-beta.2
5 years ago
3.7.0-beta.1
5 years ago
3.7.0-beta.0
5 years ago
3.6.1
6 years ago
3.6.0
6 years ago
3.5.0
6 years ago
3.4.0
6 years ago
3.3.2
6 years ago
3.3.1
6 years ago
3.3.0
6 years ago
3.2.1
6 years ago
3.2.0
6 years ago
3.1.2
6 years ago
3.1.1
6 years ago
3.1.0
6 years ago
2.4.4
6 years ago
2.4.2
6 years ago
2.4.1
6 years ago
2.4.0
6 years ago
2.3.0
6 years ago
2.2.0
6 years ago
2.1.0
6 years ago
2.0.0
6 years ago
1.6.0
6 years ago
1.5.0
6 years ago
1.4.2
6 years ago
1.4.1
6 years ago
1.4.0
6 years ago
1.3.0
6 years ago
1.2.0
6 years ago
1.1.0
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago