custom-scroll-behaviors

v1.0.12

Published

2 years ago

Library for scroll events on webpages, including parallax effects and much more, easy to use with custom elements and JS only approach (coming soon). See test/example projects and the source at [github](). Supports all known desktop and mobile browsers

Downloads

0High
0Medium
0Low

the-blue-1

custom-scroll-behaviors-js (v1.0.7) - in development

Library for scroll events on webpages, including parallax effects and much more, easy to use with custom elements and JS only approach (coming soon). See test/example projects and the source at github. Supports all known desktop and mobile browsers (except IE and Opera mini).

current version (1.0) supports

custom html elements for scroll behaviors
predefined behaviors for
- vertical/horizontal movement
- color change
- opacity change
custom behavior to adjust to your needs
automatically adjust the height of the body (optional)

next version (1.1) will support:

js only approach (without custom html)
animation types (like ease)

Install and Import

You can install the module

with npm: npm i custom-scroll-behaviors
without npm: download the package and move it into your project

To import

in simple projects (front-end html import):

<head>
  <script type="module" src="../../target/index.js"></script>
  <script type="module">
    import {
      scrollElementsConfig,
      scrollHandler,
    } from "../../target/index.js";
    scrollElementsConfig.autoSizePage = true;
    scrollHandler.init();
  </script>
</head>

in React projects:

React.useEffect(() => {
  const loadingScrollBehavior = import("custom-scroll-behaviors");
  loadingScrollBehavior.then((scrollBehavior) => {
    scrollBehavior.scrollElementsConfig.autoSizePage = true;
    scrollBehavior.scrollHandler.init();
  });
}, []);

Usage of custom HTML elements

add the behaviors to an element by adding the custom element as a child

<div class="some-style">
  <vertical-scroll-behavior
    start="0px"
    end="700px"
    start-pos="0vh"
    end-pos="90vh"
  ></vertical-scroll-behavior>
  <rgba-color-scroll-behavior
    start="100px"
    end="1000px"
    start-color="#ff0000ff"
    end-color="#0000ffff"
  >
  </rgba-color-scroll-behavior>
</div>

Elements

| Name | | -------------------------- | | vertical-scroll-behavior | | horizontal-scroll-behavior | | visibility-scroll-behavior | | rgba-color-scroll-behavior | | custom-scroll-behavior |

Properties of the custom elements

On all behaviors

| name | usage | allowed values | | ------ | ------------------------------------------------------ | ------------------------------------------------------------- | | start | start of the animation(scroll distance from top) | number with unit (px,vh,vw)(no unit will default to px) | | end | end of the animation(scroll distance from top) | number with unit (px,vh,vw)(no unit will default to px) | | speed | multiplier for scroll-value | positive number | | repeat | let the animation repeator continue itself | "repeat" / "continue"optional |

Each behavior also has a start and end value (like the start and end position). Of the five attributes : start,end,speed,"start-value","end-value" exactly 4 have to be specified Start and end parameters are allowed to end with +self or -self to add or remove the own height or width (mostly height)

On vertical and horizontal behaviors

| name | usage | allowed values | | --------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------- | | start-pos | position of the element at the start of the animation(left/top of the element) | number with unit (px,vh,vw)(no unit will default to px) | | end-pos | position of the element at the end of the animation(left/top of the element) | number with unit (px,vh,vw)(no unit will default to px |

On visibility behavior

| name | usage | allowed values | | ------------- | ---------------------------------------------------- | ---------------------- | | start-opacity | opacity of the element at the start of the animation | number between 0 and 1 | | end-opacity | opacity of the element at the end of the animation | number between 0 and 1 |

On rgba background color behavior

| name | usage | allowed values | | ----------- | -------------------------------------------------- | -------------------------- | | start-color | color of the element at the start of the animation | hex rgba value (#ffffffff) | | end-color | color of the element at the end of the animation | hex rgba value (#ffffffff) |

On custom behavior

| name | usage | allowed values | | ---------------------- | -------------------------------------------------- | ------------------------ | | start-value | value of the element at the start of the animation | number | | end-value | value of the element at the end of the animation | number | | css-attribute | name of the css attribute that is animated | string (valid attribute) | | css-attribute-unit | unit of the attribute (like "px") | string | | css-attribute-pre-unit | pre unit of the attribute (like "#" for colors) | string |

Usage of JS only approach

(coming soon)

Config

| name | usage | allowed values | | ------------ | --------------------------------------------------------------------------------------------------------------- | -------------- | | autoSizePage | sets the height of the body to the end of the last animation(won't be the right height for every website) | boolean | | | | |

General Information

interfering behaviors will be overridden by the last one