4.0.1 • Published 8 years ago
scroll-refractor v4.0.1
scroll-refractor
A web component that scrolls its content perpendicularly.
Check out a demo.
Why
You want to navigate through a horizontal interface by scrolling vertically or vice versa.
How
The component expands in the direction of scroll proprtional to its content, and then uses requestAnimationFrame
to translate its firstElementChild
along a perpendicular axis.
Example
<x-scroll-refractor orientation=vertical factor=0.5 reverse>
<div>
<img src=1.jpg>
<img src=2.jpg>
<img src=3.jpg>
</div>
</x-scroll-refractor>
License
Public domain