Horizontal scroll with easing

**Jarre** · Oct 2, 2002, 12:14

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.

**jofa** · Oct 2, 2002, 18:22

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>

**jofa** · Oct 2, 2002, 18:44

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?

The SitePoint Forums have moved.

User Tag List

Thread: Horizontal scroll with easing

Thread Tools

Display

Horizontal scroll with easing

Re: Horizontal scroll with easing

Bookmarks

Bookmarks

Posting Permissions