SitePoint Sponsor |
|
User Tag List
Results 1 to 3 of 3
Thread: Horizontal scroll with easing
-
Oct 2, 2002, 12:14 #1
- Join Date
- Sep 2002
- Location
- Aylmer, Quebec, Canada
- Posts
- 7
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Oct 2, 2002, 18:22 #2
- 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>
-
Oct 2, 2002, 18:44 #3
- 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
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>
Does anyone have the answer?
Bookmarks