https://github.com/oom-components/scroll-styles

Javascript library to apply css custom properties depending on the scroll position
https://github.com/oom-components/scroll-styles

animation es6 parallax scroll vanilla-javascript

Last synced: about 1 month ago
JSON representation

Javascript library to apply css custom properties depending on the scroll position

• Host: GitHub
• URL: https://github.com/oom-components/scroll-styles
• Owner: oom-components
• License: mit
• Created: 2020-06-26T13:17:04.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-06-29T16:40:13.000Z (over 4 years ago)
• Last Synced: 2024-09-23T12:09:41.649Z (3 months ago)
• Topics: animation, es6, parallax, scroll, vanilla-javascript
• Language: JavaScript
• Homepage:
• Size: 13.7 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @oom/scroll-styles

Javascript library to apply css custom properties depending on the scroll position, allowing to create scrolling efects like parallax. It has the following features:

* No dependencies

* Superlight

* High performance

* Follows the **progressive enhancement strategy**

* Built with ES6, so you may need a transpiler for old browser support

It's inspired by [basicScroll](https://github.com/electerious/basicScroll) library but lighter and with better performance, in order to be more flexible and customizable.

## Install

Requirements:

* NPM or Yarn to install [the package and the dependencies](https://www.npmjs.com/@oom/scroll-styles)

* Any browser supporting the following APIs:

  * [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to detect when the elements are visible in the viewport.

  * [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to perform the animations.

  * [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList) to observe elements while a media-query is true.

```sh

npm install @oom/scroll-styles

```

## Usage

```js

import Scroll from './vendors/@oom/scroll-styles/src/scroll.js';

const scroll = new Scroll();

//Register an element to observe

const element = document.querySelector('.parallax');

scroll.observe(element, {

    name: '--scale',  // Name of the custom property

    element: [0, 1],  // [from, to] element intersection (0 = top, 1 = bottom, 0.5 = middle, etc)

    viewport: [1, 0]  // [from, to] viewport intersection

    media: '(min-width: 500px)'  // Observe only while this media-query is true

    //Custom handler, if you want to do more things that just update the property

    handler(element, scale, options) {

        element.style.setProperty(options.name, scale);

    }

})

//Remove an element

scroll.unobserve(element);

//Remove all elements

scroll.disconnect();

```

The `--scale` variable is a float number between 0 and 1, so you can use it in the css code:

```css

.parallax {

    /* Use the value as is */

    opacity: var(--scale, 1);

    /* Use calc() to convert to other units */

    transform: translateY(calc(var(--scale, 1) * 50rem));

}

```

## Demo

To run the demo, just clone this repository, enter in the directory and execute:

```sh

npm install

npm start

```

You should see something in `http://localhost:8080/`

There's an online demo here: https://oom-components.github.io/scroll-styles/