Search code examples
cssheaderbackground-imagecenteringparallax

Parallax image loads fine, but jumps to center when hovered over

I've got this peculiar bug I've been trying to fix today—-still no luck. If you look at the example below,

http://vitaliyg.com/alpha/hire/

Here's what happens. The full-width background image loads in the correct position, centered along the y axis. Then when we hover over the image, the whole image jumps over to the middle, and slowly adjusts itself back to it's normal desired position.

What's causing this is left: 50%; margin-left: -960px;. This allows us to center the image correctly to begin with. If we didn't have this CSS, the hover wouldn't jump, but the image would load anchoring itself on the top left of the browser.

In the link above, the red box is the content div. The blue box is some text that will be parallaxing with the background-image.

Here is what I am trying to achieve:

  1. Make the background-image appear centered.
  2. When the user hovers over the background-image, it would not jump to the middle of the page.
  3. And lastly, decrease the width of which the user would be able to "parallax" on the x axis. The way it is now, is that the user can see from side to side of the image if patient enough. I want the parallax to be very subtle.

Also, I'm using jParallax, found here:
http://stephband.info/jparallax/

Thank you for your help!

Solution

  • Once you set the position via CSS for the background image, it seems jQuery Parallax plugin alters those settings. The solution then is to apply those settings after the jQuery Parallax has dealt with that parallax layer.

    First, remove the margin-left and left from your .parallax-layer#background class.

    .parallax-layer#background {
  background-image: url('../images/bg.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 1920px;
  height: 620px;
}

    Ideally, center the blue box using the same method (unless you want it partially off screen). I've also removed non essential CSS based on your HTML.

    .parallax-layer#tagline {
  background-color: blue;
  width: 400px;
  height: 400px;
}

    Finally, add the CSS rules that were removed from the background and tagline selectors so they are applied after jQuery Parallax has manipulated those items.

    jQuery(document).ready(function(){
    jQuery('#parallax .parallax-layer')
    .parallax({
        mouseport: jQuery('body')
    });
  jQuery('#background').css({marginLeft: "-960px", left: "50%", bottom: "0px"});
  jQuery('#tagline').css({marginLeft: "-200px", left: "50%"});
});

    You no longer will see the large white section (body background color) to the left of the background image when the mouse enters the viewport.

    This jQuery Parallax plugin aligns everything top/left by design. If the mouse enters the viewport from the right of the blue box, that box animates to that location correctly.

    However, should the mouse enter from the left side of the blue box, that box will 'jump' to the cursors location. You might consider removing the last jQuery line above so the blue box is top/left upon browser load or use a lower percentage value like 25%.

    For those that landed on this Question/Answer and wanted some real markup to work with, I have set up two jsFiddles. One jsFiddle duplicated the problem and the other has the solution as shown above.

    Original Problem - jsFiddle
    Fixed Applied - jsFiddle

    Both jsFiddles are in full screen mode so the Parallax effects can be seen.

    Instructions to view Original Problem:
    1. Launch the above Original Problem jsFiddle Link.
    2. Press the jsFiddle Play Button, being careful not to enter the viewport. If the blue box moves in any way... you've entered the viewport so press the play button again.
    3. Enter from the top/left of the viewport and you will see the problem... the HTML Body (white color) is seen as the background image readjusts itself.
    4. Press the Play Button at any time to reset the webpage.

    To see the Fixed Applied, either launch the link above or at the Browsers Address Bar modify the URL so you see revision 1 of that jsFiddle. (i.e., http://jsfiddle.net/UG4Sq/1/embedded/result/ )

    The blue box indicates via text which jsFiddle your viewing. Cheers!