FIXED APPLIED

by lovromar

HTML

<link rel="stylesheet" href="http://stephband.info/jparallax/css/jquery.parallax.css">
<script src="http://stephband.info/jparallax/js/jquery.parallax.min.js"></script>
<!--

SO Answer by arttronics: http://stackoverflow.com/a/13759634/1195891

This jsFiddle version shows FIXED APPLIED.

See the previous (first) jsFiddle revision for Original Problem:  http://jsfiddle.net/UG4Sq/

Problem Description: When the mouse enters the viewport, the background image resets itself in such a way that you see the background color (white) to the left of the background image, but then this no longer occurs once inside the viewport. For the most profound result, enter from top/left of viewport.

Solution Applied: See NEXT jsFiddle revision for solution used that consists of changed CSS for .parallax-layer#background and .parallax-layer#tagline and moving those CSS rules to newly created jQuery selectors.

-->


<div class="headerWrap">
    <div class="parallax-viewport" id="parallax">

        <div class="parallax-layer" id="background">
        </div>

        <div class="parallax-layer" id="tagline">
            <h1>Fixed Applied Demo. Lorem  ipsum dolor sit amet, consectetur adipiscing elit. Etiam non pharetra  mi. In nec magna sed nibh congue pellentesque nec sit amet lacus.</h1>
        </div>
    </div>
</div>

<div class="container_16">
    <div class="grid_16"></div>
</div>

CSS

/* Heavly edited CSS from OP's CSS stylesheet. */

html, body {
  height: 100%;
}

body {
  font: 16px/22px "Arial", sans-serif;
  color: #484844;
  background: #fffdfa;    
}

h1 {
  font-size: 26px;
  line-height: 28px;
  opacity:0.99;
  font-weight:normal !important;
}

.headerWrap {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
}

.parallax-viewport {
  position: relative;     /* relative, absolute, fixed */
  overflow: hidden;
  max-width: 1900px; 
  height: 608px;
}

.parallax-layer {
  position: absolute;
  overflow: hidden;
}

.parallax-layer#background {
  /* OP's bg image was 1920 x 620, however this random 1920x1080 image is used.*/
  background-image: url('http://img179.imageshack.us/img179/2954/78889624cc0.jpg');
  background-repeat: no-repeat;
  background-position: center bottom;
  width: 1920px;
  height: 620px;
  /* left: 50%;            FIXED APPLIED */
  /* margin-left: -960px;  FIXED APPLIED */
}

.parallax-layer#tagline {
  background-color: blue;
  width: 400px;
  height: 400px;
  /* left: 50%;            FIXED APPLIED */
  /* margin-left: -200px;  FIXED APPLIED */
}

.grid_16 {
  background-color: red;
  height: 800px;
}

JavaScript

// Always press the jsFiddle RUN Buton after page has loaded.


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%"});
   
});