StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>First, remove the <code>margin-left</code> and <code>left</code> from your <code>.parallax-layer#background</code> class.</p> <pre class="lang-css prettyprint-override"><code>.parallax-layer#background { background-image: url('../images/bg.jpg'); background-repeat: no-repeat; background-position: center bottom; width: 1920px; height: 620px; } </code></pre> <p>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.</p> <pre class="lang-css prettyprint-override"><code>.parallax-layer#tagline { background-color: blue; width: 400px; height: 400px; } </code></pre> <p>Finally, add the CSS rules that were removed from the <strong>background</strong> and <strong>tagline</strong> selectors so they are applied after jQuery Parallax has manipulated those items.</p> <pre class="lang-js prettyprint-override"><code>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%"}); }); </code></pre> <p>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.</p> <p>This <strong>jQuery Parallax</strong> 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. </p> <p>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 <strong><code>25%</code></strong>.</p> <hr> <p>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.</p> <p><a href="http://jsfiddle.net/UG4Sq/embedded/result/" rel="nofollow"><strong>Original Problem - jsFiddle</strong></a><br /> <a href="http://jsfiddle.net/UG4Sq/1/embedded/result/" rel="nofollow"><strong>Fixed Applied - jsFiddle</strong></a></p> <p>Both jsFiddles are in full screen mode so the Parallax effects can be seen.</p> <p><strong>Instructions to view Original Problem:</strong><br /> <strong>1.</strong> Launch the above Original Problem jsFiddle Link.<br /> <strong>2.</strong> 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.<br /> <strong>3.</strong> 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.<br /> <strong>4.</strong> Press the Play Button at any time to reset the webpage.<br /></p> <p>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., <code>http://jsfiddle.net/UG4Sq/1/embedded/result/</code> )</p> <p>The blue box indicates via text which jsFiddle your viewing. Cheers!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload