MOAS - Mother of all Scripts

[aepiphid]

I'm having some trouble figuring out a way to control the speed a Web page scrolls when using jump links <a href="#link">. I would like the page to scroll to the corresponding anchor <a name="link"> at a set speed, scanning over the area in-between. I've seen this done before (without using Flash), but for the life of me, I could not deconstruct the script that was used to make it work.

I have searched plenty of databases and resources, and I am convinced this question has never been addressed in any of them.

This will apply on my own personal Website and I intend on using it in other projects as well. I wanted to challenge myself by creating an entire site on one page. The page's dimensions are 9000x9000 px., and I would like the page to scroll at a medium pace between sections of the site instead of leaping there directly. Here's the URL:

http://www.paulsuniverse.com

Any suggestions? Has anyone seen this specifically addressed, and if so, where?

[tim_gor]

I just clicked on your link and I can see what you're trying to do... it's quite an interesting idea I must say!

Anyway, in reply to your question...
I have to say I don't know of any way to capture ANCHOR scrolls. You say you've seen one so presumably some kind of mechanism must exist that I don't know about...

However, I can think of a getaround. You can actually make the browser window scroll without using ANCHORS -- using

window.scroll(x,y)
-- which scrolls to (x,y) in the window.

You can also get the current scroll of the window by

window.document.body.scrollLeft
window.document.body.scrollTop

So I would suggest doing something that loops using setTimeout (or something similar) through window.scroll(x,y) incrementing x or y or decrementing.

The challenge then, I guess, is getting the right co-ordinates to scroll TO, so instead of inserting anchors, you might try using LAYERS, using the DIV tag

<div id="..." style="position:absolute; width:...; height:... left:XCOORDINATE; top:YCOORDINATE">

This way you know where each "anchor" is because you've explicitly specified where each layer is on your 9000x9000 area.

I look forward to seeing how you get on with this... should look quite cool I imagine. Perhaps you could even incorporate some kind of SMOOTH scrolling -- like, speeding up and slowing down as you approach different areas...!

Tim

[aepiphid]

Thank you. Actually, I stand corrected. I should have stated that I am using window.scrollto() to link around the site. I posted this same question on an HTML board, and I spoke of this in <a> terms so others would understand.

I'll have to give this script a shot when I have a free moment.

If anyone else has seen this in action before and know of a script, please send it my way!

[_LOBO_]

I have a new challenge for you take a look in HTML PART AND make click in the links.

mantekilla (http://www.mantekilla.com/)

[aepiphid]

Yes! This is what I am trying to do! I have the source, but I have not determined exactly what makes the site move as it does.

Do you know, or shall I take this one on myself?

[_LOBO_]

I dont have clue how this guys made that and I never try to do something like that, I just keep the address coz It looks really cool :)

But maybe I will try to studie y bit how they do that is really intersting and it looks great!

[aepiphid]

I pulled all of the source code and .js files. The shifting effect is built right into the page. Would you like a copy of the source to try to decifer this effect too?

Anyone else interested? Here is the site again:

http://www.mantekilla.com

We are trying to deconstruct the shifting technique used when navigating the HTML version of this site. Post a response, and I'll send you the code.

[Vladdy]

The mantekilla guy is just shifting one big div inside a smaller div. This technique has a few disadvantages:
1. The page can only be certain sise, which is a huge accessibility disadvantage
2. From 1: it requires a popup
3. I have to look at irrelevant content as it goes from one corner to another.
4. Moz sliding is slower

Here is a concept demo I whipped up during lunch hour that has none of these disadvantages:
http://www.vladdy.net/Demos/ContentSlider.html
If developed further the method allows for wider variety of sliding effects (right now it is just from random side and pushing previous content out) such as sliding over the previous content and nonlinear motion.

[aepiphid]

Vladdy,

This is an excellent script! I definitely see some application here.

However, the scanning of irrelevant content on mantezilla's page is actually what I am trying to accomplish. I have his code, and I'll work on decifering everything when I get a moment, I guess.

[DrDaMour]

that universe thing is really a neat idea.

i'm lost as to why you just dont do a scroller function like so






steps = 100
stepx = (stopx-currentx)/steps;
stepy = (stopy-currenty)/steps;


x=currentx
y=currenty

for(;;){

scrollto(x,y);
x+= stepx;
y+= stepy;

if (x > stopx || y > stopy) break;
}

scrollto(stopx,stopy);

that's ugly but you can expand upon it easily