Nostradamus Prophecy Machine
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    parallax-vanillapublic

    parallax-vanilla.js

    Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance.

    Demo

    Main features

    Super lightweight without dependencies

    A few kilobytes of pure JavaScript.

    Viewport-only animations

    Parallax elements are only animated within the current viewport, saving a lot of resources.

    Dynamic sizing

    Image-elements are dynamically sized and adjusted relative to the pv-speed.

    Performance is key

    Vanilla Parallax maximizes your parallax effects with hardware acceleration and zero external libraries.

    Media type independence

    The parallax effect applies not only on images but on videos as well. Videos' audio will play if the videos are clicked and remain within the viewport.

    Browser support

    Tested browsers:

    Chrome Safari Firefox
    60+ 10+ 44+

    Installation

    bower

    bower i --save parallax-vanilla

    npm

    npm i --save parallax-vanilla

    Include

    Download package and include parallax-vanilla.min.css in the head tag and parallax-vanilla.min.js just before the closing body tag. Don't forget to put the source map parallax-vanilla.js.map next to parallax-vanilla.min.js within your directory.

    <link href='path/to/parallax-vanilla.min.css'>
    <script src='path/to/parallax-vanilla.min.js'></script>

    Usage

    Simple usage

    1. Wrap a pv-block with a pv-container.

    <div class='pv-container'>
      <div class='pv-block'></div>
    </div>

    2. Attach a mediapath to pv-block

    <div class='pv-container'>
      <div class='pv-block' pv-mediapath=path/to/file.extension></div>
    </div>

    3. Initialize library.

    <div class='pv-container'>
      <div class='pv-block' pv-mediapath=path/to/file.extension></div>></div>
    </div>
    <script>
      pv.init()
    </script> 

    JavaScript initialization options

    Optional global settings can be configured upon initialization.

    pv.init({
      container: {
        class : String,
        height : String || Number,
      },
      block: {
        class: String,
        speed: Number || Float,
        mediapath: String,
        mediatype: String,
        mute: Boolean,
      }
    });

    JavaScript Settings

    Name Type Default Description Example values
    settings Object {container, block} Settings object. These settings will be applied to each container and block. Can be individually overwritten by data attributes. {container: {...}, block: {...}
    settings.container Object {class, height} The container object. {...}
    settings.container.class String pv-container The class of the container element. Remember to update the CSS classes if you wish to change this. pv-container
    settings.container.height String || Number 250px The container's height in either pixels or viewport heights. If the string lacks a suffix, or a number is entered, it will default to pixels. 250px, 50vh, 250
    settings.block Object {class, speed, mediatype, mediapath} The block object. {...}
    settings.block.class String pv-block The class of the block element. Remember to update the CSS classes if you wish to change this. pv-block
    settings.block.speed Number || Float -Math.PI The speed and direction at which the parallax animated. Negative values will animate the `block` upwards when scrolling downwards on the page. 1, 1.5, -1, -1.5
    settings.block.mediatype String image The block's media type. Blocks with mediapaths containing a video extension will automatically be considered videos. image, video or none
    settings.block.mediapath String undefined The block's media path. ../path/to/file.ext
    settings.block.mute Boolean false Defines whether or not all videos should be muted. true or false

    Data attributes: Customize individual elements

    Data attributes allow fine control over each individual element and will overwrite the global JavaScript settings.

    <div class='pv-container' pv-height=100vh>
      <div class='pv-block' pv-speed=3.14 pv-mediatype=video pv-mediapath=path/to/epic_montage.mp4 pv-mute=false></div>
    </div>

    This code will produce a container with class pv-container with height 100vh containing a block with class pv-block with a parallax speed of 3.14 displaying the media epic_montage.mp4 of type video with pv-mute=false.

    Data attributes for container
    pv-height
    Data attributes for block
    pv-speed
    pv-mediatype
    pv-mediapath
    pv-mute

    The descriptions and the default values are the same as the corresponding properties of the JavaScript settings object.

    CSS

    The CSS in parallax-vanilla.min.css is required in order for parallax-vanilla to function properly.

    .pv-container {...}
    .pv-container .pv-block {...}
    .pv-container .pv-block video {...}
    .audio-icon {...}

    LICENSE

    MIT

    install

    npm i parallax-vanilla

    Downloadsweekly downloads

    19

    version

    1.1.2

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar