SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help needed for an auto-scrolling layered parallax effect

    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/...indow-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.u...ling-carousel/
    http://www.dynamicdrive.com/dynamici...ongallery2.htm
    http://www.files.riacodes.com/flash_...tical-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. #2
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <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>
    Tab-indentation is a crime against humanity.

  3. #3
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by Vega Nadir View Post
    Where may I post questions about CSS on this board, please?
    In the CSS forum: http://www.sitepoint.com/forums/foru...mp-Page-Layout

  5. #5
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Construct a scrollable div with an ID.
    2. Style it with a background image.
    3. Add script to page as shown.
    Which part is giving you trouble?
    Tab-indentation is a crime against humanity.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •