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

<div class="scroll-motion" data-speed-y="-2">
  Vertical scroll slow
</div>
<div class="scroll-motion" data-speed-y="7">
  Vertical scroll fast
</div>
<div class="rellax" data-speed-x="3">
  Horizontal scroll
</div>

<script src="scroll-motion.js"></script>
<script>
  // Accepts any class name
  var scrollMotion = new ScrollMotion('.scroll-motion');
</script>

<script>
  // Also can pass in optional settings block
  let scrollMotion = new ScrollMotion('.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