Scroll Motion

Small vanilla javascript library for x,y transforms while scrolling

Public URL

https://dev.stevenjacobprice.com/scroll_motion/

Figma Motion Exploration Demo:

https://dev.stevenjacobprice.com/demo-figma/

Inspiration

• RELLAX.js github

Getting Started

<divclass="scroll-motion" data-speed-y="-2">
Vertical scroll slow
</div><divclass="scroll-motion" data-speed-y="7">
Vertical scroll fast
</div><divclass="rellax" data-speed-x="3">
Horizontal scroll
</div><scriptsrc="scroll-motion.js"></script><script>// Accepts any class namevarscrollMotion=newScrollMotion('.scroll-motion');</script>

<script>// Also can pass in optional settings blockletscrollMotion=newScrollMotion('.scroll-motion',{speedX: -2,speedY: 0,observe: 1,});scrollMotion();</script>

Prerequisites

• intersection-observer.js | polyfill

Installing

To get Scroll Motion running on your local machine do the following steps.

1. git clone https://github.com/whiteboxpub/scroll-motion.git
2. cd scroll-motion

or

1. npm install intersection-observer (polyfill)
2. npm install scroll-motion

Built With

• Vanilla JS

Authors

• Steven Price - Inital work - stevenjacobprice.com, GitHub

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details