SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    What is this effect? Animated scroll down?

    Hi!

    I came about this website http://www.volll.com/ and I really like how the page smoothly repositions visitors to other sections of the website.

    I suspect the effects are made by javascript (I know close to zero about js) I'm lost as to how I'd go about finding resources to replicate the effect.

    I saw maybe one or two so far but the scrolling was very jarring.

    Anyone know any helpful resources?

    Thanks a bunch!

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can reproduce a similar effect using the http://script.aculo.us/ library.

    If I recall correctly, its

    Code javascript:
    new Effect.ScrollTo(element to scroll to);


  3. #3
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks the quick response!

    I just checked it out, I clicked on the 'getting started link' and it took me to the documentation right away, I don't know if its a comprehensive list of all their effects (it seems to imply that it is) I don't see any Effect.ScrollTo there.

    Maybe I'm being daft and its there, just not listed under core, or its under another name, but I looked over alternatives and they don't scroll, seem to just move/slide content...

    I'll look at it again in case I missed it

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the effect in action. Its part of the Effect class. It is documented, but it is listed in the demo.

    http://www.wholewheatweb.com/scroll_to.html


  5. #5
    SitePoint Addict
    Join Date
    Nov 2005
    Posts
    260
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If you look at the source code you can see that they are using the smoothto() function to 'jump' to each of the named divs smoothly.

  6. #6
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry I didn't check first.

    I don't advise you link directly to the script.acuo.us website but I have in this case to show you.

    Code xhtml:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css"></style>
            <script type="text/javascript" src="http://script.aculo.us/prototype.js"></script>
            <script type="text/javascript" src="http://script.aculo.us/scriptaculous.js"></script>
        </head>
        <body>
     
            <div id="top"></div>
            <a href="javascript:void(0);" onclick="new Effect.ScrollTo('one', {queue: 'end'});">One</a><br />
            <a href="javascript:void(0);" onclick="new Effect.ScrollTo('two', {queue: 'end'});">Two</a><br />
            <a href="javascript:void(0);" onclick="new Effect.ScrollTo('three', {queue: 'end'});">Three</a><br />
            <a href="javascript:void(0);" onclick="new Effect.ScrollTo('four', {queue: 'end'});">Four</a><br />
     
            <h1 id="one">One <a href="javascript:void(0);" onclick="new Effect.ScrollTo('top', {queue: 'end'});">Top</a></h1>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <h1 id="two">Two <a href="javascript:void(0);" onclick="new Effect.ScrollTo('top', {queue: 'end'});">Top</a></h1>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <h1 id="three">Three <a href="javascript:void(0);" onclick="new Effect.ScrollTo('top', {queue: 'end'});">Top</a></h1>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <h1 id="four">Four <a href="javascript:void(0);" onclick="new Effect.ScrollTo('top', {queue: 'end'});">Top</a></h1>
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
     
        </body>
    </html>


  7. #7
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wowow, its working!!

    thanks for the example! I struggled with the other website, but working off your example i got it working now (and i'm not linked to script.acuo.us)

    i had anchors with 'name' attribute not id, so it wasn't working at first.

    do you have any idea how I could pass the id to the url?

    currently clicking on #link will scroll down to where #link is, but this wont be reflected in the URL.

    Thanks again! I'm going to look at the link you provided and see if i could implement Gary's solution, I think he's had the whole bookmark thing sorted in his code.

  8. #8
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh no, its not working in FireFox 3.0, well, sort of working.

    Going to strip my page to make sure no existing markup is making the script work wrong or something..

  9. #9
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ICO View Post
    Hi!

    I came about this website http://www.volll.com/ and I really like how the page smoothly repositions visitors to other sections of the website.
    There are dedicated scripts for this task requiring no configuration, like SoftScroll.
    Tab-indentation is a crime against humanity.


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
  •