Smooth is a small JavaScript module based on VirtualScroll to create smooth scrolling and parallax effects on scroll.
npm install smooth-scrollingSmooth is a small JavaScript module based on VirtualScroll to create smooth scrolling and parallax effects on scroll.
It works both with fake scrollbars and native scrolling.
npm install smooth-scrolling
``javascript
import Smooth from 'smooth-scrolling'
const section = document.querySelector('.vs-section')
const smooth = new Smooth({
native: true,
section: section,
ease: 0.1
})
smooth.init()
`
- listener: on-scroll events listener & parent container for all elementsdirection
- : vertical or horizontal scrolling behaviornative
- : use the default scrollbarsection
- : the element to transformease
- : the easing value (usually between 0 and 1)vs
- : you can pass some option for virtuall-scroll: limitInertia, mouseMultiplier, etcpreload
- : if set to false, there will be no resize function called after all images loadednoscrollbar
- : if using virtual-scroll and set to true, it will not build a custom scrollbarcallback
- : function called on requestAnimationFrame
#### smooth.init()
Will add all event listeners and DOM elements.
#### smooth.on()
Will listen to either window scroll event (if native), otherwise VirtualScroll
#### smooth.off()
Will stop listening to onscroll/wheel events.
#### smooth.destroy()
Will remove all event listeners and DOM elements.
#### smooth.scrollTo(offset)
Basic scrollTo function.
`javascript
import Smooth from 'smooth-scrolling'
class Custom extends Smooth {
constructor(opt = {}) {
super(opt)
this.dom.section = opt.section
this.dom.opacity = opt.opacity
}
run() {
super.run()
const current = Math.round(Math.abs(this.vars.current))
const opacity = Math.max(0, Math.min(1 - current / (this.vars.height * .5), 1))
this.dom.opacity.style.opacity = opacity.toFixed(2)
this.dom.section.style[this.prefix] = this.getTransform(-this.vars.current.toFixed(2))
}
resize() {
this.vars.bounding = this.dom.section.getBoundingClientRect().height - this.vars.height
super.resize()
}
}
export default Custom
`
`javascript
// ...and later on
import Custom from './custom-smooth-scrolling'
const section = document.querySelector('.vs-section')
const opacity = document.querySelector('.vs-opacity')
const smooth = new Custom({
section: section,
opacity: opacity,
ease: 0.1
})
smooth.init()
`
git clone git@github.com:baptistebriel/smooth-scrolling.git
cd smooth-scrolling/ && npm i && npm run dev
You can use http-server or MAMP to preview the demos.
npm run demo-parallax
npm run demo-parallax-page
npm run demo-horizontal
npm run demo-native-horizontal
npm run demo-opacity
npm run demo-scale
npm run demo-split
npm run demo-performances`
- etq.store
- femmefatale.paris
- buildin.amsterdam
- romainpsd.com
- flavinsky.com
- alisharaf.com
- bbriel.me
- studiochevojon.com
- andeinerseite.video
- eginstill.com
- blackballoon.fr
- & more to come!
If you didn't already read the tutorial, I highly recommend it.
Smooth.js is basically what's explained on the blog post. I just needed a simple script to get things done without having to write lots of code every time I wanted to use this technique.
MIT, see LICENSE.md.