SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Location
    Aylmer, Quebec, Canada
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Horizontal scroll with easing

    I am looking for a JavaScript that scrolls the screen or layer horizontally. Once, I came across a site that used a JavaScript that scrolled the page horizontally, starting slow, accelerating and decelerating towards the end, exactly what easing lets you do in Macromedia Flash.

    I would appreciate if someone could point me to the right direction, or even paste me the appropriate piece of code in reply.

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this?
    Works in Mozilla 1.1, Opera 6.05 & IE 6.0 (win)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
    <html>
      <head>
        <script language="javascript">
          var y = 0; 
          var dir = 1; 
          var h = 1000;
          var v = 50;
          function init()
          {
            if(document.all)
            {
              h = document.body.offsetHeight - document.documentElement.clientHeight;
            }
            else
            {
              h = document.body.offsetHeight - window.innerHeight;
            }        
          }
          function scrolling()
          {
            var dy = v * Math.sin(Math.PI * y / h) + 1;
            y += dir * dy;
            if((y > h) || (y < 0))
            {
              dir *= -1;
              if(y > h) y = h;
              if(y < 0) y = 0;
            }
            window.scroll(0, y);
          }
        </script>
      </head>
      <body onLoad="init();setInterval('scrolling()', 30);">
        <h1>Text</h1>
        <h1>Text</h1>
    ...
        <h1>Text</h1>
        <h1>Text</h1>
      </body>
    </html>

  3. #3
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Horizontal scroll with easing

    Originally posted by Jarre
    I am looking for a JavaScript that scrolls the screen or layer horizontally
    OK, horizontally

    Like this?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
    <html>
      <head>
        <script language="javascript">
          var x = 0; 
          var dir = 1; 
          var w = 1000;
          var v = 50;
          function init()
          {
            if(document.all)
            {
              w = document.body.offsetWidth - document.documentElement.clientWidth;
            }
            else
            {
              w = document.body.offsetWidth;
            }        
          }
          function scrolling()
          {
            var dx = v * Math.sin(Math.PI * x / w) + 1;
            x += dir * dx;
            if((x > w) || (x < 0))
            {
              dir *= -1;
              if(x > w) x = w;
              if(x < 0) x = 0;
            }
            window.scroll(x, 0);
          }
        </script>
      </head>
      <body onLoad="init();setInterval('scrolling()', 30);">
        <table><tr><td nowrap><h1>Text text text...text text text </h1></td></tr></table>
      </body>
    </html>
    Problem; cannot get the width of the body correct in Mozilla & Opera
    Does anyone have the answer?


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
  •