npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

custom-scroll-behaviors

v1.0.12

Published

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

9

Readme

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