Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin

Overview

Parallax.js

Simple parallax scrolling implemented as a jQuery plugin.
http://pixelcog.com/parallax.js/

Please also check our v2.0.0-alpha! We'd be happy to receive your feedback!

ATTENTION: please use the issue tracker for bug reports and feature requests ONLY! For questions and topics which go along the lines "I cannot get this to work" please turn to stackoverflow.com for help and use the tag parallax.js. Thank you for your understanding!

Installation

NPM

npm i --save jquery-parallax.js

Yarn

yarn add jquery-parallax.js

Bower

Please note that although Bower is still maintained, they recommend Yarn for new projects.

$ bower i --save parallax.js

Setup

Include parallax.min.js in your document after including jQuery (compatible with jQuery >= 1.7).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/path/to/parallax.min.js"></script>

Use these CDN links, provided by jsDelivr.com

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

Usage

Please note, that <!DOCTYPE html> on top of your document is required!

Simple version via data attributes

Note: for more complex requirements we recommend using the inner HTML markup below! With that it's possible to use the parallax effect with almost any HTML content

To easily add a parallax effect behind an element, add data-parallax="scroll" to the element you want to use, and specify an image with data-image-src="/path/to/image.jpg".

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>

Via JavaScript

To call the parallax plugin manually, simply select your target element with jQuery and do the following:

$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});

Notes

What parallax.js will do is create a fixed-position element for each parallax image at the start of the document's body (or another configurable container). This mirror element will sit behind the other elements and match the position and dimensions of its target object.

Due to the nature of this implementation, you must ensure that these parallax objects and any layers below them are transparent so that you can see the parallax effect underneath. Also, if there is no other content in this element, you will need to ensure that it has some fixed dimensions otherwise you won't see anything.

.parallax-window {
	min-height: 400px;
	background: transparent;
}

Also, keep in mind that once initialized, the parallax plugin presumes a fixed page layout unless it encounters a scroll or resize event. If you have a dynamic page in which another javascript method may alter the DOM, you must manually refresh the parallax effect with the following commands:

jQuery(window).trigger('resize').trigger('scroll');

Using inner HTML for complex content

You can use the following syntax to enable complex content for the parallax:

<div class="parallax-window">
  <div class="parallax-slider">
    <span style="position:absolute; top: 400px; left: 400px;">Some Text</span>
	<p>Some other Content</p>
  </div>
</div>

Please note, that the div with class "parallax-slider" is essential here.

You then need to initialize it through JS and provide the naturalWidth and naturalHeight options in order to be rendered correctly.

$('.parallax-window').parallax({
    naturalWidth: 600,
    naturalHeight: 400
  });

This also makes it possible to use responsive images in the slider:

<div class="parallax-window">
  <div class="parallax-slider">
    <img src="/path/to/image.jpg" srcset="/path/to/image-400px.jpg 400w, /path/to/image-800px.jpg 800w, /path/to/image-1200px.jpg 1200w" sizes="100vw">
  </div>
</div>

Options

Options can be passed in via data attributes of JavaScript. For data attributes, append the option name to data-, as in data-image-src="".

Note that when specifying these options as html data-attributes, you should convert "camelCased" variable names into "dash-separated" lower-case names (e.g. zIndex would be data-z-index="").

Name type default description
imageSrc path null You must provide a path to the image you wish to apply to the parallax effect.
naturalWidth number auto You can provide the natural width and natural height of an image to speed up loading and reduce error when determining the correct aspect ratio of the image.
naturalHeight number auto
position xPos yPos center center This is analogous to the background-position css property. Specify coordinates as top, bottom, right, left, center, or pixel values (e.g. -10px 0px). The parallax image will be positioned as close to these values as possible while still covering the target element.
positionX xPos center
positionY yPos center
speed float 0.2 The speed at which the parallax effect runs. 0.0 means the image will appear fixed in place, and 1.0 the image will flow at the same speed as the page content.
zIndex number -100 The z-index value of the fixed-position elements. By default these will be behind everything else on the page.
bleed number 0 You can optionally set the parallax mirror element to extend a few pixels above and below the mirrored element. This can hide slow or stuttering scroll events in certain browsers.
iosFix boolean true iOS devices are incompatable with this plugin. If true, this option will set the parallax image as a static, centered background image whenever it detects an iOS user agent. Disable this if you wish to implement your own graceful degradation.
androidFix boolean true If true, this option will set the parallax image as a static, centered background image whenever it detects an Android user agent. Disable this if you wish to enable the parallax scrolling effect on Android devices.
overScrollFix boolean false (Experimental) If true, will freeze the parallax effect when "over scrolling" in browsers like Safari to prevent unexpected gaps caused by negative scroll positions.
mirrorContainer jQuery Selector body The parallax mirror will be prepended into this container.

Contributing

If you have a pull request you would like to submit, please ensure that you update the minified version of the library along with your code changes. This project uses uglifyjs to perform code compression.

Please use the following command:

uglifyjs parallax.js --comments -m -c -o parallax.min.js

LICENSE

The MIT License (MIT)

Copyright (c) 2016 PixelCog Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • when height of div is change through click the parallax background absolute position on page goes wrong

    when height of div is change through click the parallax background absolute position on page goes wrong

    when height of div is change through click the parallax background absolute position on page goes wrong.

    See example on bug on url below. How can i refresh paralax through jquery on a click action?

    http://karmacoffee.se/ Click read more > scroll down se how the parallax background position is wrong after click

    opened by karelbabor 28
  • White Space above the image

    White Space above the image

    I've read a few similar bugs that have been marked close, but no matter what I do, there's always a gap above my image, likely from the math of the layout being off.

    screen shot 2016-03-01 at 1 40 22 pm

    I've attempted to use $(window).trigger("resize").trigger("scroll"); and $(window).trigger('resize.px.parallax'); using on Load callbacks for the .parallax-slider class and with other events to no success.

    The gap corrects itself on page resize, but only then is it correct. Any ideas?

    opened by destefanis 26
  • Wordpress Setup

    Wordpress Setup

    @kosvrouvas @mikegreiling

    I reviewed the issue from #25, however my image doesn't show.

    Code I used from the example

    $url = wp_get_attachment_url( get_post_thumbnail_id( $post->ID ) );
    
    <div class="parallax-window" data-parallax="scroll" data-image-src="<?php echo $url; ?>">
    </div>
    

    See Image Below screen shot 2016-04-05 at 5 52 12 pm

    Platform Wordpress: 4.5

    opened by JamesVanWaza 17
  • Can't get image to appear

    Can't get image to appear

    Hello:

    I'm sorry but I'm not having any luck getting this to work. After following your instructions, the image isn't even appearing in my parallaxed div element. The page is here:

    http://testing004.compoundeyedesign.com/

    .. where I'd like my image to appear is in the white box under the video and the under the purple signup box. In that

    I have this code:

    <div class="row" data-parallax="scroll" data-image-src="/assets/zoom-39777438-3.jpg" style="background: transparent;">

    And in the bottom of the page code — under where the jQuery is called, as recommended — is my parallax script:

    <script src="./index_files/jquery.min.js"></script> <script src="/parallax/parallax.js"></script>

    Things I tested:

    1. Any errors in the Chrome Dev Tools for calling the image
    2. Looking in other browsers to make sure it wasn't just Chrome.

    Any ideas? Thanks in advance.

    Cheers, Russell

    opened by compoundeye 17
  • Non-Body scroll

    Non-Body scroll

    I have the body set to always static and a fuax body element is what scrolls how would i update to specify the scrolling element? (the reason why i do this is for a mobile side nav menu can open and push the "body" to the right).

    question solved 
    opened by Nick-lab 15
  • Jittering in Safari

    Jittering in Safari

    Hi! The plug-in works nice except one thing. I launched my project in Chrome and Safari on MacOS and I found that in Safari the background parallax layer picture jitters while scrolling. Even if speed is set to 0. In Crome it works perfectly. Is there a way to fix it?

    opened by MikeMiller88 14
  • <img alt=">

    ...

    Hi, all!

    I would like to have an img-altText for parallax-images...

    function Parallax(element, options) {
      ...
      if (!this.altText) {
        $.extend(this, {altText: 'parallax background-image'});
      }
      ...
      this.$slider[0].alt = this.altText;
    }
    

    Thanks, Roman

    opened by rbinder 13
  • Twitter bootstrap modal hidden / snipped by google chrome

    Twitter bootstrap modal hidden / snipped by google chrome

    Example here : http://v3.romaindauby.fr Under "Parcours professionnel" click the "+ plus" button.

    Don't work even if I put the modal juste before <\body>. The modal works fine if i set zIndex to 1 or more in parallax.js but i loose the text over images. It works fine on firefox ...

    I can't find a solution.

    Thanks in advance.

    opened by r0mdau 13
  • Bug during scroll on Firefox and Safari

    Bug during scroll on Firefox and Safari

    Hello, I have a bug on firefox during scrolling:

    I have a parallax on my newsletter section, I have set a top red border (to better observe the problem) and when I scroll to top, the image parallax move and go out of the div container (during scrolling, after it's ok).

    Problem in image: http://i.imgur.com/Qo5NLbY.jpg Normal page: http://puu.sh/bKB0q/257cc897df.jpg

    Have you a solution please ? Else in extra, it's possible to set a background from css and use parallax ?

    Thanks.

    opened by AxelBriche 13
  • Resize trigger not functioning correct.

    Resize trigger not functioning correct.

    hey :) just a small issue nothing major. I have another script to watch the "body-container" for a resize and then sends the JQuery(window).trigger('resize').trigger('scroll'); however it only works when the parallax is not in view. any ideas what might be the cause of this?

    question solved 
    opened by Nick-lab 12
  • Internet explorer is buggy/jerky

    Internet explorer is buggy/jerky

    In internet explorer the parallax effect is quite jerky. It may be better to actually fix this issue, but until then =>

    Currently fixed this in my application by duplicating the ios/android fix:

    inserted at line 116: if (navigator.userAgent.match(/(Trident|MSIE)/)) { if (this.msieFix && !this.$element.is('img')) { this.$element.css({ backgroundImage: 'url(' + this.imageSrc + ')', backgroundSize: 'cover', backgroundPosition: this.position }); } return this; }

    from line 163: $.extend(Parallax.prototype, { speed: 0.2, bleed: 0, zIndex: -100, iosFix: true, androidFix: true, msieFix: true, position: 'center', overScrollFix: false, ...

    opened by ghost 12
  • Parallax 2.0 not working on mobile

    Parallax 2.0 not working on mobile

    I've tried to port to 2.0 on my client's website but it still doesn't work on mobile. I thought I red on the website it should? https://pakariapowell.com/ (New arrivals section)

    Here's an example of 2.0 where it does work it seems? What's the difference? https://shackpalacerituals.com/

    opened by friederjanmoerman 0
  • Feature request: Support responsive images

    Feature request: Support responsive images

    For responsive purpose, you may want to download a different image based on the device size. The goal is to avoid a 300px width mobile to download a 2000px width image. So you may have multiple version of the same image on your server, then the browser chooses which one to download depending on the device with, and saves bandwidth/time/planet.

    To achieve that, 2 main solutions:

    1. On an , you may use srcset and sizes attributes link here. The good thing about this solution, is that it handles the pixel ratio of the device, so you don't have to bother about it. All you say is "my picture is fullscreen, and what is available is, for instance, a 480px img, a 900px, and a 2000px. So the browser will download the 900px on a 400px Iphone, and the 480px one on a "classic" 400px screen. Magic.

    2. On

      with img background, the easiest way is to use @media-query in CSS, but is not suitable for this library. So the swap would have to be through JavaScript, inside the library. Notice you have to take into account the pixel ratio. If the innerWidth is 420, on an iPhone it means you have to use at least a 840px image.

    For now, the only workaround I found is to manually detect the useragent (as the library does), and disable parallax.js on them. So I may handle the static image I show for mobiles myself, and choose which image to download... But that means disabling the library so you may not call this a "workaround"...

    opened by albancho 0
  • Setting speed to negative value does not reverse parallax effect

    Setting speed to negative value does not reverse parallax effect

    I've been playing around with the .js file to try and get the effect to reverse, but no luck so far. A number of old tickets mention setting the speed to a negative value, but this doesn't seem to work.

    Either way, thank you for an excellent, lightweight plugin!

    opened by towiwakka 0
  • is it possible to put text on the images with html for the effect?

    is it possible to put text on the images with html for the effect?

    I was wondering if it is possible to put pictures or logos or anything on the images that are a part of the parallax effect? Please let me know I would love to be able to have that as a feature! Thank you!

    opened by nh916 2
  • Flash on image load

    Flash on image load

    Hello, I made this website using pixelcog parallax.js: http://www.sfdecacao.com/ (it's in French but only the images are important here)

    As you can probably see, each background image using the parralax effect takes a little bit of time to load, so there is a flash before it appears. At first the flash was white, but I made the background color of the website black so that it would be more natural looking. However, I am still looking for a way to fix this flash. The problem is that the images only load when they appear on screen, and not when the website loads, so the user sees each flash.

    The source code for my website is here: https://github.com/GL150hcknt/SFC

    I do not know exactly if this is caused by parallax.js or not, but it would be a great help if someone knew how to fiw this.

    opened by GabrielLanglois 0
  • V. 1.5 works on mobile devices, but this v. 2.0 does not?

    V. 1.5 works on mobile devices, but this v. 2.0 does not?

    On https://pixelcog.github.io/parallax.js/ there is a demo that works mobile devices, too. But that's v. 1.5. How come this v. 2.0 does not work on mobile devices?

    opened by FrankConijn 0
Releases(v1.5.0)
  • v1.5.0(Oct 10, 2017)

  • v1.4.2(Jan 30, 2016)

  • v1.4.1(Dec 22, 2015)

  • v1.4.0(Dec 21, 2015)

  • v1.3.2(Mar 4, 2015)

  • v1.3.1(Feb 25, 2015)

    Release Notes:

    • Add "overScrollFix" option which attempts to correctly extend the parallax effect when "over scrolling" in browsers like Safari
    • Ensure no max-width rule applies to parallax sliders. (see issues #32, #33)
    • Fix issue where positionX and positionY attributes were being overridden. (see issue #24)
    Source code(tar.gz)
    Source code(zip)
  • v1.3(Jan 29, 2015)

    Release Notes:

    • Change the way parallax dimensions are calculated for images near the top or bottom of the document. (see issue #16)
    • Utilize uglifyjs compress and mangle options to save more space in the minified javascript.
    Source code(tar.gz)
    Source code(zip)
  • v1.2.1(Jan 29, 2015)

    Release Notes:

    • Fix typos in the documentation (pr #12 and #17)
    • Utilize outerHeight() rather than height() when calculating parallax mirror element dimensions. (issue #14)
    Source code(tar.gz)
    Source code(zip)
  • v1.2(Jan 29, 2015)

    Release Notes:

    • Fix inconsistency in the minified js (issue #9)
    • Implement ability to disable parallax effect on Android user agents (pr #5)
    Source code(tar.gz)
    Source code(zip)
  • v1.1(Jun 10, 2014)

  • v1.0.1(Jun 10, 2014)

  • v1.0(Jun 9, 2014)

  • v0.9.1(Jun 8, 2014)

    Release Notes:

    • Now properly initializes the scroll position on page load.

    To Do:

    • Provide alternative implementation for iOS browsers with different scroll event handling.
    Source code(tar.gz)
    Source code(zip)
  • v0.9(Jun 8, 2014)

    Release Notes:

    • Should provide fluid parallax scrolling across all major desktop browsers.
    • Updated to account for poor scroll event handling in the Safari web browser.

    To Do:

    • Provide alternative implementation for iOS browsers with different scroll event handling.
    Source code(tar.gz)
    Source code(zip)
Owner
PixelCog Inc.
PixelCog Inc.
A jQuery plugin that assists scrolling and snaps to sections.

jQuery Scrollify A jQuery plugin that assists scrolling and snaps to sections. Touch optimised. Demo http://projects.lukehaas.me/scrollify. More examp

Luke Haas 1.8k Dec 29, 2022
Click effect inspired by Google's Material Design

Waves Click effect inspired by Google's Material Design http://fian.my.id/Waves/ Documentation Waves uses Situs to generate documentation. Here are so

Alfiana Sibuea 3.5k Dec 23, 2022
fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulate the page preloading effect.

What is fakeLoader.js fakeLoader.js is a lightweight jQuery plugin that helps you create an animated spinner with a fullscreen loading mask to simulat

João Pereira 721 Dec 6, 2022
Animation library that mimics CSS keyframes when scrolling.

Why Motus ? Motus allows developers to create beatuful animations that simulate css keyframes and are applied when the user scrolls. Features Node & B

Alexandru Cambose 580 Dec 30, 2022
A simple and easy jQuery plugin for CSS animated page transitions.

Animsition A simple and easy jQuery plugin for CSS animated page transitions. Demo & Installation http://git.blivesta.com/animsition/ Development Inst

Yasuyuki Enomoto 3.8k Dec 17, 2022
Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using

Leonardo Santos 762 Dec 20, 2022
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37k Jan 2, 2023
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Dec 27, 2022
A jquery plugin for CSS3 text animations.

Textillate.js v0.4.1 See a live demo here. Textillate.js combines some awesome libraries to provide an easy-to-use plugin for applying CSS3 animations

Jordan Schroter 3.6k Jan 2, 2023
A jQuery plugin that recreates the Material Design pre-loader (as seen on inbox).

Material Design Preloader!s A jQuery plugin that recreates the Material Design preloader (as seen on inbox). I was fascinated when I first saw the pre

Aaron Lumsden 376 Dec 29, 2022
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage.js English | Español | Français | Pусский | 中文 | 한국어 Available for Vue, React and Angular. | 7Kb gziped | Created by @imac2 Demo online | Cod

Álvaro 34.3k Dec 30, 2022
Super-smooth CSS3 transformations and transitions for jQuery

jQuery Transit Super-smooth CSS3 transformations and transitions for jQuery jQuery Transit is a plugin for to help you do CSS transformations and tran

Rico Sta. Cruz 7.4k Dec 23, 2022
Unobtrusive page transitions with jQuery.

smoothState.js smoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user's browse

Miguel Pérez 4.5k Dec 21, 2022
Matteo Bruni 4.7k Jan 4, 2023
Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti

Alex MacArthur 165 Dec 12, 2022
simple JavaScript library to animate texts

Animated Texts Hi, this library is a simple javascript text animator Properties force type: number default: 300 start_delay_time type: number default:

Cristóvão 4 Jan 11, 2022
Making Animation Simple

Just Animate 2 Making Animation Simple Main Features Animate a group of things as easily as a single thing Staggering and delays Chainable sequencing

Just Animate 255 Dec 5, 2022
Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance.

parallax-vanilla.js Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra perfo

Erik Engervall 91 Dec 16, 2022
Parallax scrolling jQuery plugin

paroller.js A lightweight jQuery plugin that enables parallax scrolling effect You can use it on elements with background property or on any other ele

null 579 Dec 26, 2022
Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).

Please note: skrollr hasn't been under active development since about September 2014 (check out the contributions graphs on https://github.com/Prinzho

Alexander Prinzhorn 18.6k Jan 3, 2023