pixelcog/parallax.js

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

parallax.js's Issues

Bug differents between packed and unpacked version

parallex.min.js didn't work for me on the IPad. The problem was that the background image that isset when using a IPad is encoded (backgroundImage:"url("+encodeURIComponent(this.imageSrc)+")) in the packed version, but not in the unpacked version. Removing the encode function fixed my problem.

Images not static on Android

As on Spotify page the images are static as on IOS. For example the parallax effect renders rather slow. So I've added a fix for that as in IOS.

Computed height does not include padding

If your target container has top/bottom padding, then the computed height of its parallax element will be too short (not taking padding into account). Changing line 167 to use outerHeight instead of height fixed the issue for me.

Gray space

Not sure exactly if this is an issue on my end or yours but I am getting white space on the bottom of the page in Chrome.

Problem with fixed menu (Chrome, Bootstrap)

Hello,

Parallax.js seems to have a bug. I build my website in Firefox where everything works great. Then I checked other browsers (Internet Explorer, Safari & Chrome). In Chrome, the fixed (bootstrap) main-menu was no longer fixed. It started moving upwards when scrolling (only in Chrome).

After reading another post, I removed 'transform: translate3d(0px, 0px, 0px)' from the script. It somewhat improved it (menu stays at the top at first), but it is still very much buggy. For instance, there will be 2 menu-bars when you scroll back to the top from the bottom.

Edit: My fault. Transform is used twice in the script. Initially I only deleted the first one. After deleting the second one, the behavior in Chrome is now identical to other browsers.

My image is in the CSS file

Hello there!

I must your script looks amazing! But i have a problem....
The image i'm trying to enable parallax.js on is in my CSS file... and i have several other images in the same file i'd to have a parallax effect on.
The IDs for the different classes are wrapped up in div tags in my HTML, this is the code for the header ID etc:

.header{
    background: url(../images/banner.jpg) no-repeat center top;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: relative;
    padding-top:19em;
    min-height:870px;
    text-align: center;
}

I have tried to use JS method, and as i expected it did not work....

Should i try to put the image source in the "div="header"" nest and hope for the best or is there any other solution?

Thanks in advance!

Elements with Dynamic Heights

In our system, we have sections that can change height dynamically. I would like to use parallax on some of these sections, but as the heights change, there's overlap in the parallax images. It looks like there is a resize function in parallax.js that adjusts the height of the parallax mirror. Is there any way to manually cause the parallax layers to redraw/update size in my event handler?

Repeating pattern sizing

Hello!

I was experimenting with some repeating background patterns and currently, the pattern image is just blown up in size to create room for the parallax effect.

I was wondering if there is any way to have parallax effect using a repeating pattern as the background?

Edit options dynamically

Is it possible to edit options after first initializing parallax on elements?

Like I initialize parallax on element by

          $('.my-window').parallax({
            imageSrc: 'img/background.jpg',
            speed:0.1,
          });

And then I would like to disable parallax (for example, after clicking on button 'disable-parallax')

$('.disable-parallax').click(function(){
   $('.my-window').parallax({
       speed:1,
   });
}

So, is it possible?

Explicitly Declare max-width: none; for Parallax Slider

Fix problem noted in issue #32.

Static image on Android shows nothing

While the parallax effect works perfectly on the desktop version of the web page, it shows nothing on a mobile device (Android, Samsung Galaxy S3). The plugin is used within a Wordpress theme.

As I understand, the images should be viewed as static if no settings are passed. Passing setting androidFix to either true or false does not change the outcome.

Some parallax images inconsistently zoom in

Take a look at my site here:
http://trendfolio.net/apollopiano/index2.php

I've repeated the same image (and code) 5 times, but the first and last ones are the only images that display the correct zoom. The images in-between are zoomed in a little bit.

parallax stuttering in IE on scroll

Hi, great piece of script! However I'm having an issue in IE. Version 10 and 9 the parallax stutters when scrolling up and down. Is there a fix for this or can it be switched off for IE?

When content of parallax expands the height of the mirror does not expand smoothly

I have a parallax with divs inside that use slideToggle.

I am mimicing the window being resized to trigger a refresh of the parallax height.

The height of the parallax changes but no way of making it smooth as it is triggered after the slideToggle has completed.

Thanks

overflow: auto; not smooth animation

the animation becomes not smooth
when the body,html tags having overflow: auto; and height:100% css properties

Parallax BG-Image not visible on iphone/ipad

Anyone knows why?

not working in IE 11?

Hello
I tryed the script and it is working in chrome. But in IE11 the first time it is not working (you don't see any picture) when you reload the page. then you see the pictures. if you clear the browser historie and cache, then again.

http://heidyhappykids.nl/

thanks peter

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.

!DOCTYPE tag required - add to doco?

Hi,
I discovered/realised Parallax.js fails without a !DOCTYPE declaration. This is not mentioned anywhere in the docs; perhaps because you expected developers like me to be writing valid HTML... :)

Regardless, this caused significant pain and lengthy trial and error on my end. Would you consider adding even a hint in your docs that doctype/fully valid html is needed?

Steve.

Attempting to Pair with Animsition

Hi, this is an awesome plugin and is working great, it's the best one I have found.
I am fairly new at using jQuery and was wondering if its a possibility to pair it with an Animsition fade.

Basically, when the page loads, the parallax images load instantly and all my other html/css elements fade on top and it is not a seamless transition. Is there someway to delay the loading of the parallax images or a least make it not instantaneous.

Its probably a stretch and may be hard to implement but any help is welcome, thanks.

source: http://git.blivesta.com/animsition/

Clash with FLEXSLIDER

http://lightphorialamp.net/product

Had it working perfectly but now it appears to clash when on the same page as flexslider.

my suspicion is that the parrallax initialises and does its page height calculations, then the flexslider loads and changes the page height but parrallax isn't updated with the new page height. Thats why removing the flex slider worked, thats why no css fixes it and thats why a small window adjustment fixes it because there is a onresize tied to it. We just have to force it post flexslider

Bug when scrolling

This library is not work!!

Prevent img load for non displayed elements

Essentially i'm just trying to figure out a way of providing lower res images for smaller screens. I want to use a lower res-static background for everything smaller than a set width,Ideally i'd like to do this with straight CSS, but would be happy to use the inbuilt solution if theres a way of providing lower res images.

Is their anyway to prevent the loading of the image if the window is display:none; for example?
That way i could do the rest with css and the large image isn't going to be loaded.

Performance issues / image flickering

Has anyone noticed issues in Firefox with the images flickering? On the demo page, one of the images may disappear while scrolling. All you see is the white background. When you stop scrolling, the image appears. This only happens occasionally. Sometimes it works totally fine. I can't figure out what is causing it.

I took a video to show the issue.

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

position, positionX & positionY not working

At the moment custom values for position, positionX & positionY are not working. I've debugged a bit and found out that my settings are always overwrited with "center".

$('.foo').parallax({
    imageSrc: 'image.jpg',
    position: 'left bottom', // not working
    positionY: 'bottom', // not working
    positionX: 'left' // not working
});

Positioning elements with CSS transforms where possible

Not really an issue, but I was wondering if you plan on adapting the plugin to use CSS transforms to position the mirror elements (rather than top) in modern browsers? Spotify's site itself does this now, and I've found it does improve the overall smoothness of the page when you've got multiple elements.

Position

First your script is wonderful.

But I'm having a problem, I have a div with 500px in height at the top of the page when I use the bottom position option, still remains much below the image area, I can not adjust to it to rise more.

Thank you.

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.

How to show content into the parallaxed div?

How to show content into the parallaxed div?
I had a parallaxed image and i wanna put some text there on it.

Callbacks

Wondering your thoughts on having a few callbacks on this. Maybe a few like:

beforeLoad
duringLoad
afterLoad

This would allow lots of flexibility for creating smooth animations.

I've noticed that there is a delay of having the .parallax-slider image show up even when using a plugin like wait for images.

Interference with existing fixed elements in Chrome

In Chrome, when I enabled this plugin my fixed positioned header started scrolling as soon as one of my parallax elements was made visible. When none were visible, the header redrew itself and acted correctly again.

Removing transform: translate3d(0px, 0px, 0px) from the parallax code fixed the issue, but so did adding the transform to my existing header. Perhaps just a troubleshooting note telling people to add this to their CSS would help others who come across this issue.

fixed navigation jumping sections

Sup dude!

Love the script, and glad you've sourced it for the masses... I had one issue, however... I created a fixed nav at the top, obviously with the hopes it would stay fixed while scrolling and the parallax effect would be all the same for the backgrounds below. But when I scroll down the page, my nav "jumps" to the top of the next parallax background when it comes into page view. After which it scrolls up with the page to the top, where it sits fixed for a moment as I had planned, only to "jump" again when the next parallax section comes.

Does that make sense?

I noticed it works fine in IE. Is this just a Chrome bug then?

Do you know the fix?

ANY AND ALL HELP TO RESOLVE THIS IS GREATLY APPRECIATED!!!!!!!!!!!

Thanks!

Destroy Function or Fallback on small viewport

Any chance to add a destroy function or defer to the fallback when the viewport is below a certain width?

I love the fallback that exists for touch devices, it would be great to have that same fallback for when the viewport for no-touch devices goes below a specified width.

This could be achieved manually if there was a destroy/reinit function

Thanks!

Feature Request: Slideshow?

Love the plugin first of all. I have one request tho, the ability to do a slideshow. Many of my clients love the parallax effect, but they want it in a slideshow as well. Any thoughts?

Content scrolls overlaps parallax itself

Hi,
thanks for a great plugin. I just have a annoying bug on my page...
http://www.piotrmajcher.nazwa.pl/heima/folio/lazio-ss-merda/. The content overlaps parallax - This is not an issue of a certain browser - this happens in all of them. It looks like parallax doesnt fit in its container.
Would appreciate any indications

Safari support

If you were not aware, your current implementation is not supported in the Safari browser.

Question on Positioning

Hi!

I'm working on a site right now and seem to be running into a pitfall with the positioning. If you look at http://globalsteeringsystems.asquaredhosting.com/global-steering/ and size the browser down (more towards a mobile width) the background images end up not extending 100% to the right. I've uploaded some pretty big images too over 5k in with and 2k in height.

Am I doing something wrong? Is this a bug? Please let me know.

Cant make it work with WordPress Function Reference

Hi, awesome work, but I'm a bit of a problem implementing it with WordPress function: get the post thumbnail

The code:

<div class="headerwrap parallax-window" data-parallax="scroll" data-image-src="<?php the_post_thumbnail( $size, $attr ); ?> ">
</div>

But doesn't seem to work, anyone know a workaround/fix or even if this is possible?

in IE not smooth

the site: http://pixelcog.github.io/parallax.js/ is working good in IE 9, but my site : www.fecto.nl is not smooth scrolling. The text is going over the image when scrolling?

Thanks for help.
peter

Possibility of fading in

Would it be possible to implement a fade in animation on the loaded image?

Conflict with CSS3 transtion effect

Please add following css properties to your project somehow:

.parallax-mirror, .parallax-mirror * {
    transition: none;
}

Image sizing not correct

Hi
I've noticed that for whatever reason, data-natural-height and data-natural-width does not pass the values correctly and that the image displayed is really out of proportion. I'm working with a 1024x256 image, but parallax.js expands the image way out of proportion. I am using mostly default settings for testing

Image 1 is the image as loaded via parallax and image 2 is loaded without. They are both the same sized frame, but for some reason, image 1 (with parallax) is overly zoomed in. Any ideas? Or am I missing a setting?

IE11 issue

After some troubleshooting, I really have no explanation for this, but wanted to file the issue anyway in case someone else had the same trouble.

In IE11 only (Chrome/Firefox are fine) I noticed that the parallax images were hidden until the page was scrolled down further than where they should have appeared.

In troubleshooting, I found that in render(), parallax.winHeight was always zero, skewing the math. Further troubleshooting revealed that while the setup function was being called, $(win).on('load') would never execute due to some order of operations issue(?) in IE.

I moved the majority of the code (the event binding) from setup() to the Constructor and things started working again.

I added additional logging to try and further reduce what was happening, which led me to assume the order of things differs from Chrome to IE11.

Chrome/Firefox/Opera:

• Constructor is called
• setup() is called
• $(window).on('load') from the Constructor is fired
• $(window).on('load') from setup() is fired

IE11:

• Constructor is called
• $(window).on('load') from the Constructor is fired
• setup() is called

IE11 never fires the load events from setup().

It's strange because your demo site works fine and I have yet to figure out how my site differs.

I'll update when my site is live to provide an example. For now, I've just moved the load logic to the Constructor.

Feature Request: Set class for .parallax-mirror

It would be great if while setting <div data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>, one could also set data-class="classy_image". This would append classy_image to the class of the fixed position element, making something like: <div class="parallax-mirror classy_image" ...><img src="... /></div>. Then, one could access and style the images themselves - adding filters, opacity, etc.

Fallback for no js users

What if user don't have javascript enabled. Blank screen is not very pretty especially becouse I have white text on top of parallax box. Setting background on div under make parallax.js not working at all.

You have any solution?

Parallax jitter bad performance

Most basic usage of parallax.js is giving me weird behavior. I'm getting white background jitter above and below the parallax background when scrolling. Example: http://gfycat.com/ThoughtfulAcceptableCaribou

I'm using Firefox 36.0.1 on OS X, but this also reproduces on Safari + OS X and Firefox + Linux. Chrome seems to work fine everywhere.

Height getting set to 0

Any ideas why the script is not setting the height based off the natural height data attribute?

Example: http://arrayhealth-wireframes.pbdhdev.com

I am using bower to pull in the parallax.js dependency and Grunt to compile (jQuery is before the other list of required components), and then minifying the script - which shouldn't be the issue?

iOS fix generates faulty absolute path

Hi there!

When using the iosFix, a relative imageSrc becomes absolute.

Example:

If my current url is www.mysite.com/subpage and my image url is /images/img.jpg, the result is:

www.mysite.com/subpage/images/img.jpg

Thanks!
/Alex

Not working on ipad

Hi!

I can´t get this plugin work static on ipad.
Can you help me please?

EDIT:
Its working!
I have to remove the "encodeURIComponent".
Because this was replacing the slash for "%2", and then could not find the images.

OLD CODE:

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
  if (this.iosFix && !this.$element.is('img')) {
    this.$element.css({
      backgroundImage: 'url(' + encodeURIComponent(this.imageSrc) + ')',
      backgroundSize: 'cover',
      backgroundPosition: this.position
    });
  }
  return this;
}

NEW CODE:

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
  if (this.iosFix && !this.$element.is('img')) {
    this.$element.css({
      backgroundImage: 'url(' + this.imageSrc + ')',
      backgroundSize: 'cover',
      backgroundPosition: this.position
    });
  }
  return this;
}