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

smooth-parallax

v1.1.2

Published

Parallax that doesn't suck! No jQuery required, just plain 'ol javascript. Smooth Parallax makes it easy to move objects when you scroll, being it images, divs or what-have-you.

Downloads

95

Readme

Smooth Parallax

Parallax that doesn't suck! No jQuery required, just plain 'ol javascript.

Smooth Parallax makes it easy to move objects when you scroll, being it images, divs or what-have-you. Use it to add that background or foreground parallax effect to your website or create a moving scene with a hippie van :)

Enjoy using Smooth Parallax?

If you enjoy using Smooth Parallax and want to say thanks, you can leave me a small tip. All payments are securely handled through PayPal.

Installation

Setting up is pretty straight-forward. Just download the script from dist folder and include it in your HTML:

<script type="text/javascript" src="path/to/smooth-parallax.min.js"></script>

Smooth Parallax also supports AMD / CommonJS

// AMD
require(["path/to/smooth-parallax"], function(SmoothParallax) {});

// CommonJS
var SmoothParallax = require("smooth-parallax");

NPM / Bower

Smooth Parallax is also available on NPM and Bower:

npm install smooth-parallax      # npm
bower install smooth-parallax    # bower

Basic Usage

Init

Just call SmoothParallax.init() to get objects moving and configure elements movement.

<script type="text/javascript">
  window.addEventListener("load", function () {
    SmoothParallax.init();
  });
</script>

Smooth Parallax will automatically look for all objects with the attribute smooth-parallax (ie.: <img src="images/hippie-van.png" smooth-parallax="">).

Configure elements movement

You'll also have to set at least one more attribute start-position or end-position, see options at standard options.

Standard Options

Global Options

These options are passed to the init function when starting Smooth Parallax.

  • basePercentageOn Set how you want to track scroll percentage:
    • containerVisibility default: scroll percentage for each moving object is calculated only when the element's container is visible in the viewport. This prevents objects from moving while not visible.
    • pageScroll: scroll percentage is based on the page scroll and is the same for all moving objects.

Elements Options

These options are passed as html attributes to the moving elements and define how that element movement behaves.

All percentage values are in decimal form, ie.: 1 = 100%. You can also set values greater than 1 and smaller than 0, ie.: -0.5 = -50% or 1.25 = 125%.

  • start-movement - define at what scroll percentage to start moving the object. Default value is 0.0;
  • end-movement - define at what scroll percentage to stop moving the object. Default value is 1.0.
  • start-position-x - define the horizontal start position of the element in percentage of its the base-size (see option below).
  • start-position-y - define the vertical start position of the element in percentage of its the base-size (see option below).
  • end-position-x - define the horizontal end position of the element in percentage of its the base-size (see option below).
  • end-position-y - define the vertical end position of the element in percentage of its the base-size (see option below).
  • container - change the elements container element user to calculate its position, default is moving element's parent node.
  • base-size - define how to calculate the base size of the movement, used to calculate the target position.
    • elementSize: calculate based on the element size itself.
    • containerSize: calculate based on the elements container size.

Contributing to Development

This isn't a large project by any means, but I'm definitely welcome to any pull requests and contributions.

You can get your copy up and running for development quickly by cloning the repo and running npm:

$ npm install

This will install all the necessary tools for compiling minified files.

Change Log

1.1.2

  • Improvement: Extend public method getScrollPercent to return scroll percentage for elements.
  • Fix: issue calculating element's size for SVG on Firefox
  • Fix: position calculation to 2 decimals precision for better performance.
  • Fix: scroll percent calculation based on containerSize.

1.1.1

  • Fix npm package.json info.

1.1.0

Upgrade Notice: This version changes how Smooth Parallax is initiated and how the elements options are set.

  • Converted script into a javascript plugin.
  • Renamed html attributes:
    • data-smooth-parallax-element > smooth-parallax
    • data-start-percent > start-movement
    • data-end-percent > end-movement
    • data-start-x > start-position-x
    • data-start-y > start-position-y
    • data-end-x > end-position-x
    • data-end-y > end-position-y
    • data-smooth-parallax-element > smooth-parallax
    • data-container-id > container.
  • Changed element option container expected value to be a valid css selector instead of element id.
  • Added element option base-size.
  • Added global option pageScroll.

1.0.0

  • Initial release

License

Licensed under MIT. Enjoy.

Acknowledgement

Smooth Parallax was created by Diego Versiani for a better Parallax Effect.