Help needed for an auto-scrolling layered parallax effect

JavaScript
1

I’ve been trying to work this out for months and had no luck yet, but I know there must be someone who can tell me how to do it.

I would like to be able to create a layered parallax effect that auto scrolls left and right, at a fixed speed, depending on which edge of the display the cursor is nearest. I would also like to be able to make certain elements (images) appear and disappear at a given point. I would also like it to animate as smoothly as possible with as little choppiness as can be helped.

Here are some resources for the best layered parallax effect I know of:

http://www.rleonardi.com/
http://www.rleonardi.com/script/header.js
http://www.onextrapixel.com/2012/07/06/javascript-tutorial-parallax-effect-thumbnail-shifting-and-sequential-window-opening/

And here are a bunch of examples of how it needs to scroll:

http://scripterlative.com/files/cursordivscroll.htm
http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm
http://www.files.riacodes.com/flash_auto-scrolling-vertical-content/
http://www.smoothdivscroll.com/#quickdemo

I don’t really care if it starts off auto-scrolling or not. I imagine that’d be an easy part to identify and tweak, anyway, if needed. I don’t care if it moves faster the closer to the edge you get, although it would be a nice feature. Can anyone please help me? I’d really appreciate any insight or suggestions. Thanks.

2

The algorithm is to keep the background-position CSS property of the element’s background, at a fixed fraction of the element’s scrolled offset.

The code below will maintain your background image at 1/4 of the scrolled offset of its div, regardless of how the div is being scrolled. It should not interfere with any separate script used to scroll the div.


<script type='text/javascript'> /** Place anywhere BELOW element to be scrolled **/

function parallaxBackground( elemID, ratio )
{
  var elem = document.getElementById( elemID );

  var addHandler = function( elem, evt, func )
  {
    elem.attachEvent ? elem.attachEvent( 'on' + evt, func ) : elem.addEventListener( evt, func, false ) ;
  }

  function f( /*2843294C6F676963416C69*/ )
  {
    elem.style.backgroundPosition = ( -Math.floor( elem.scrollLeft / ratio ) ) + "px "
    + ( -Math.floor( elem.scrollTop / ratio ) ) + "px";
  }

  addHandler( elem, 'scroll', f );
}

parallaxBackground( 'myDiv', 4 ); /* <-- replace 'myDiv' with ID of element to be scrolled */

</script>
3

Ugh, I’m really sorry. Thank you so much for trying to help me. I’m still having difficulty, a lot of which is due to my level of expertise (or lack thereof). I’m doing this for a friend who doesn’t know anything about making websites. I know considerably more, but this is way over my head. I’ve asked that friend’s friend, who is a programmer, to help me and even he can’t seem to get it, so I’m starting over from scratch. I’m now looking at a purely CSS script which is much, much simpler, but I still need a bit of help. Where may I post questions about CSS on this board, please?

4

In the CSS forum: http://www.sitepoint.com/forums/forumdisplay.php?53-CSS-amp-Page-Layout

5

[LIST=1]
[*] Construct a scrollable div with an ID.

[*] Style it with a background image.

[*] Add script to page as shown.
[/LIST]Which part is giving you trouble?

6

Hi,

I’ve been following this thread and it would be a shame if you couldn’t see what Ali is trying to show you, so I’ve made you a small example:
http://hibbard.eu/blog/pages/parallax/

You can see the effect most clearly if you grab the scrollbar handle and drag it down.
If you have a look at the source code you should be able to figure the rest out from there.

I’m not sure that this really answers your initial question, but maybe it’ll point you in the right direction.

7

Thanks to everyone for trying to help me. I did try to implement the code, but it didn’t seem to have any effect, whatsoever. It’s very likely that I’m the one doing something wrong, but I can’t, for the life of me, figure out what. I tried inserting it just above the </body> tag of the HTML page and I gave it the ID of “content”.

I’m really not supposed to show this to anyone, but here is a visual reference for what I’m doing. This is just a rough draft, so the images I’ve made are only temporary. In any case, I have yet to figure out how to change the type of scrolling from the way it is now to something that will auto-scroll left or right depending on which edge the mouse is nearest.

As for the CSS forum, sorry I didn’t see it before. I don’t know how I missed it, but it seems obvious now.

Thanks again for all of the help.