A library that modifies element properties as you scroll to achieve parallax motion
- Vanilla Typescript
- Light & Responsive
- Use in your projects or as learning material
| Description | Type | |
|---|---|---|
| el | The slides elements | HTMLElement |
| easing? | The easing function (see easing.js) | String |
| debug? | Log out some values | boolean |
| modifiers? | See Modifier type below | Modifier[] |
| Description | Type | |
|---|---|---|
| selector | The css selector for the element to modify | String |
| property? | The css property to modify (e.g. width) | String |
| start? | The starting property | Number |
| end? | The destination property value | Number |
| unit? | The property unit (e.g. px, %) | String |
| callback? | A callback function which receives two parameters, the html element, and the progress through the active slide | Function |
e.g.
import"./main.scss";importSlideScrollfrom"./slide-scroll"import{Options}from"./interfaces";constslides=document.querySelectorAll<HTMLElement>(`.slides`);slides.forEach(el=>{constoptions: Options={
el,easing: "easeInOutCubic",modifiers: [{selector: ".line",property: "width",start: 0,end: 100,unit: "%"},{selector: ".box",property: "height",start: 0,end: 100,unit: "%"},{selector: ".progress",callback: function(el,progress){el.innerHTML=`${Math.ceil(progress)}%`}}]};constslides=newSlideScroll(options)slides.watch();})