Skip to content

Latest commit

 

History

History
150 lines (114 loc) · 6.32 KB

README.md

File metadata and controls

150 lines (114 loc) · 6.32 KB
Raw

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 repeat
or 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