Note that there are some explanatory texts on larger screens.

plurals
  1. POI am following this but cant seem to get it to work
    primarykey
    data
    text
    <p><a href="http://www.weblinc.com/labs/jquery-parallax/" rel="nofollow">http://www.weblinc.com/labs/jquery-parallax/</a></p> <p>I have followed that, and it doesn't work for me, looking at the source code of the demo, it's nothing like the tutorial, does it work for anyone else? or is it broken</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href="global.css"/&gt; &lt;script script type="text/javascript" src="jquery.parallax.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;script&gt; $('.bg-far').parallax({ speed: 0.2, axis: 'x' }); $('.bg-close').parallax({ speed: 0.5, axis: 'x' }); &lt;/script&gt; &lt;div class="bg-far bg"&gt;&lt;/div&gt; &lt;div class="bg-close bg"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; .bg { position: absolute; top: 0; left: 0; height: 7000px; width: 100%; background-repeat: repeat; } .bg-far { background-image: url(bg1.png); opacity: 0.8; z-index: 5; } .bg-close { background-image: url(bg2.png); z-index: 10; } </code></pre> <p>here is the jquery:</p> <pre><code>// jquery.parallax.js // @weblinc, @jsantell, (c) 2012 ;(function( $ ) { $.fn.parallax = function ( userSettings ) { var options = $.extend( {}, $.fn.parallax.defaults, userSettings ); return this.each(function () { var $this = $(this), isX = options.axis === 'x', origPos = ( $this.css( 'background-position' ) || '' ).split(' '), origX = $this.css( 'background-position-x' ) || origPos[ 0 ], origY = $this.css( 'background-position-y' ) || origPos[ 1 ], dist = function () { return -$( window )[ isX ? 'scrollLeft' : 'scrollTop' ](); }; $this .css( 'background-attachment', 'fixed' ) .addClass( 'inview' ); $this.bind('inview', function ( e, visible ) { $this[ visible ? 'addClass' : 'removeClass' ]( 'inview' ); }); $( window ).bind( 'scroll', function () { if ( !$this.hasClass( 'inview' )) { return; } var xPos = isX ? ( dist() * options.speed ) + 'px' : origX, yPos = isX ? origY : ( dist() * options.speed ) + 'px'; $this.css( 'background-position', xPos + ' ' + yPos ); }); }); }; $.fn.parallax.defaults = { start: 0, stop: $( document ).height(), speed: 1, axis: 'x' }; })( jQuery ); </code></pre> <p>does not move like in the demo</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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