1.1.3 • Published 4 years ago
apple-scroller v1.1.3
apple-scroller
Implements fancy scroll animation, as seen in Apple website like this.
- Supports multiple scrolling content in single page.
- Preloads images to make animation smoother.
- Covers the entire screen.
Notes
- Animation rendered as sequential images
- The more image exists, the smoother the animation becomes
- Works fine with Node v14.4.0, Chrome 83.0.4103.97
Installation
npm i apple-scroller
Usage
const appleScroller = require('apple-scroller')
require('apple-scroller/style.css') // necessary
import imgs from './assets/*.png'
// 1.png, 2.png, 3.png, ...
let container1 = document.getElementById('container1')
let appleScroll1 = new appleScroller(container1, imgs, '300vh')
// container div, img sequence, height of scroll area
// 200vh: short animation
// 500vh: long animation
document.getElementById('button').addEventListener('click', () => {appleScroll1.redraw(appleScroll1)})
// initializes view again.
// call when viewport size have changed.
// needs itself as argument for now.
// supports multiple scrolling element
let container2 = document.getElementById('container2')
let appleScroll2 = new appleScroller(container2, imgs, '1000vh')
Credit
Inpired by the tutorial of CSS Tricks. Thanks!
1.1.1
4 years ago
1.1.3
4 years ago
1.1.2
4 years ago
1.1.0
4 years ago
1.0.28
4 years ago
1.0.26
4 years ago
1.0.27
4 years ago
1.0.25
4 years ago
1.0.24
4 years ago
1.0.23
4 years ago
1.0.19
4 years ago
1.0.22
4 years ago
1.0.21
4 years ago
1.0.20
4 years ago
1.0.18
4 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.15
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.12
4 years ago
1.0.9
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.2
4 years ago
1.0.3
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago