FRIHOSTFORUMSSEARCHFAQTOSBLOGSCOMPETITIONS
You are invited to Log in or Register a free Frihost Account!


INNOVATION IN NAVIGATION!!





kevinalle
Hi people.
Please take a moment to watch a new invention in web-navigation..
Its a little JavaScript I made recently, which makes use of the scrolling properties.

Use the menu (or the scrollbar) to navigate through the pages, and note the 3D-ish bakground too..
Here´s the URL: http://tekage.com.ar/uploaded/scrollpage.htm .

Please leave comments and share your opinion!
Thanks,
Kevinalle
ftv_flung
Hey,

That's pretty cool! Really reminds me of the new iPod Touch (and iPhone) interface!

'tis good - look forward to seeing it with content!
rappn
Awesome!
Keep up the good work man!

Don´t forget to post when you have completed the function!
I mean, with text and everything, might end up really cool!

Have you done anything more like this function?

If you have, can´t you post a link or something that shows it!


As i wrote up there,
KEEP UP THE GOOD WORK MAN!
AWESOME FUNCTION!
kevinalle
Hi and thanks for commenting!

I don't really have much content to put into it... You may use it for your own stuff (as long as you keep a reference or a note saying I invented it.. Smile )

Its made using the Spring formula.. It's like:
Code:
Force=-constant*distance

(Where distance is the distance between current scroll position and target.)
Then acceleration is force, and then NewSpeed=speed*friction+acceleration, and scrollPosition+=NewSpeed... something like that.
The most complicated part was getting things to work propperly under Mozilla AND IE...

Have you noticed the 3D-ish background effect?


Here's another little app using These formulas:
http://tekage.com.ar/uploaded/spring.swf
(It's a flash with AS3.. you'll nedd flash player 9)

Thanks again,
Kevinalle
GB
That's a pretty neat trick. At first I didn't like it, way too bouncy, but I think it is pretty neat. I think that would be really neat for a portfolio site or something like that. I'd love to use this someday when I have time to re-do my website (it is long overdo!)
tekage
Hey! very neat!
I like the way it bounces...
And I find the background effect very cool..
Say, how did you manage to make the squares go slower when you scroll the page?
Thanx
kevinalle
Oh.. sure..
that wasn't an easy part...
The little squares are divs inside a big, full document div.
As you scroll the page (Javascript detects it on every timeout hit) the absolute position of this big div changes, relative to the amount scrolled.
Code:
    function scrollit(){
      scro=document.body.scrollTop;
      for(var o=0;o<layers;o++){
        document.getElementById('bg'+o).style.top=1.4*scro/(o+2);
      }
      document.getElementById('menu').style.top=scro-vel*10+100;
      var scrollit_time=setTimeout("scrollit()",20);
    }

Basically what it does is get the scroll-position (scrollTop) and asign a new "top" atribute to the background layer.. (given by 1.4*scrolledamount/2 or 1.4*scrolledamount/2, this is because there are rally 2 background layers that move differently).

Thanks for your intrest!
n0rw1n
kevinalle wrote:
Hi people.
Please take a moment to watch a new invention in web-navigation..
Its a little JavaScript I made recently, which makes use of the scrolling properties.

Use the menu (or the scrollbar) to navigate through the pages, and note the 3D-ish bakground too..
Here´s the URL: http://tekage.com.ar/uploaded/scrollpage.htm .

Please leave comments and share your opinion!
Thanks,
Kevinalle


Interesante efecto, pero no me gusta ver como los bloques intentan seguir el scrolling torpemente, creo que con un poco más de css y menos scripting puedes lograr mejores resultados
BLAK
This is really cool script I like it alot....
I hope you going to finish it and show it to us Smile

GOOD LUCK:)

PEACE!!
silverdown
***** ( 5 stars)

Very nice, hope it's going to be a free script Very Happy It's not to bouncy for me. Though the background look like it has ADD or some type of twitching disability but that only if I use the mouse scroll wheel. Very nice.
Magicman
It is a cool concept and well executed but its kinda choppy on my computer. If it was done in flash it would be smoother but javascript can be a little too figity sometimes. It is amazing that you got that kind of motion with just scripting though. Good Job.
pudovkin
Two thumbs up! Smile
kevinalle
Hey, thanks everyone!
yes, you can use the code if you like, it is visible to all.
I dont know why some of you say its a little jerky.. tryed on a faster machine?
I dont really know what i'm going to do with it so... finish it yourselves!
Glad you enjoyed it and there will be more soon.
Good luck!,
K
shenyl
First and foremost - yes it is innovative.

It works well on your site, but when I donwnloaded to my test D drive, the browser reported error and if I want to debug, I answered no twice and the scrolling/hanging menu is not displayed correctly.

The 3D-ish background does not appeared - only the background and two fixed divisions with mixed up menu items

Invalid char in line 1 twice
Invalid "YAHOO" in line 32.

I will try and check it up. But will be nice if you could help.

With best regards.
shenyl
Oh, I tried looking at the code, and found that there is a href to style.css.

This file is missing from the link for download, and thus unable to run properly apart from your web site.

Will be great if the style.css is make available.

With best regards.
asim
Hi Buddy,

Nice Script dude keep it up.
kevinalle
shenyl:
the problem is: the script includes other scripts..
as you may see in the header
Code:
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="yahoo-min.js"></script>
<script type="text/javascript" src="dom-min.js"></script>

you´ll also need to download these files:
http://tekage.com.ar/uploaded/yahoo-min.js
http://tekage.com.ar/uploaded/dom-min.js
http://tekage.com.ar/uploaded/style.css

Download these and save everything in the same directory and it´ll be running perfectly.
Thanks for your intrest and comments,
K
shenyl
Thank you so much, Kevinalle, I will experiment with it and if needed put more comments here.

With best regards.
shenyl
kevinalle, yes with the 2 JavaScript files and the CSS file, the Bouncing menu and 3D-ish background work just as on your site.

Thanks.
©Wolfie
Hi there,

That looks amazing! Nice, it works on Opera too!

But you can only use this template for small websites. Not for a blog or thing like that. But it's very nice! Be proud on your work!

WOLF.
kevinalle
Quote:
That looks amazing! Nice, it works on Opera too!

oh thnks, that was a doubt I had... I could only try it on Firefox and IE... had never tryed it in Opera... good to know it also works..
Quote:
But you can only use this template for small websites. Not for a blog or thing like that.

Yes, its true... I tryed with a long-content site and it didnt work that good.. But I think it might be useful for some site with fixed not-to-long content..
Also consider that the site will load entirely at once... so be sure to load content the user is really going to see.

Also its not necessary to use it as a temple as I presented it to have a prewiew.. It could be just a part of a website or an iframe.. or the scrolling scripts could be used for something different.

Next thing I or someone else should try to do is the same but horizontally. My first idea was a lateral scroll, but I figured out vertically is much, much easier...
But I think its worth it giving it a horizonlal-oriented shot...

Thanks for commenting!
GB
Hey,
I'm really enjoying playing with this script and would really like to use it to make my graphic design portfolio site. However, the problem is that I'm a designer and still learning about web development. I'm having trouble figuring out where exactly to put my images and text in each of the content sections. Could you help me or at least point me in the right direction?

Thank you so much for this code. It looks terrific!
kevinalle
Hi GB.
I made the code a bit more readable for you to use it.
download it from here: http://tekage.com.ar/uploaded/scrollpage.zip
just replace the titles ("Title 1", "Title 2", etc) and the "CONTENT CONTENT CONTENT" parts..
(I suppose you know some HTML)
Then I would like to see it finished.
Thanks for your intrest,
K
GB
Wow, thanks!
Yes, I know HTML (more or less), just not javascript. I couldn't figure out how to get each label to change.

Thanks again, this really is a neat navigation idea. It is extremely interactive and definitely has that "wow" factor.
richard270384
Quote:
But you can only use this template for small websites. Not for a blog or thing like that.
Yes, its true... I tryed with a long-content site and it didnt work that good.. But I think it might be useful for some site with fixed not-to-long content..
Also consider that the site will load entirely at once... so be sure to load content the user is really going to see.


Firstly, I absolutley love it. I also like the fact that its not done in flash. I dont have time to muck around with it myself, but I'm not convinced that you would need to load the entire site at once.

I had a site a while back where I wanted people to be able to play a song while the surfed my site, without the song restarting every time they went to a new page.

I think you could use the same technique here to avoid loading the whole page at once.

Basically, you have a hidden iframe. When someone clicks a link, that link opens in the iframe. When the iframe finishes loading, a javascript is triggered which copies all the html in the iframe into the relevant div (using the innerHTML property). I got it to work on netscape and IE but never tested it on any other browsers.

Since the iframe is not a part of XHTML you could end up with some XHTML compliance and accessibility issues, but I think it's an idea worth toying with.

If you can make this work for larger sites, I wouldnt be surprised if this takes off in certain genres.

I wish you all the best and encourage you to develop this as much as you can and consider designing site's for people based on your script. I think if you develop it enough you could make some big bucks.

Cheers,
Richard
kevinalle
hey, thanks for your help.
I think I get what you mean but im not quite sure how i would programme it or how it would acctually look. But the idea is grate.
you really think I could make money of this? I would have thought it is a bit too funky and people would like it just for fun..
anyway.. feel free to use it and modify it, and make sure you show me your results.
Thanks again,
K
richard270384
kevinalle wrote:
hey, thanks for your help.
I think I get what you mean but im not quite sure how i would programme it or how it would acctually look. But the idea is grate.
you really think I could make money of this? I would have thought it is a bit too funky and people would like it just for fun..
anyway.. feel free to use it and modify it, and make sure you show me your results.
Thanks again,
K


I think for the right type of site you could make money off it.

The older internet user I think would find it too 'different' to be able to deal with. But I think sites that are directed towards teenagers (who's minds adapt easier to new things) could use this interesting code as a way of seperating them from their competitors. I'm thinking sites like radio stations and even movie sites as examples. I think younger people would find this navigation really engaging and it would keep them at a site longer.
kevinalle
wow.. that's intresting..
I should give it a try and see what people think..
thks
Related topics
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.