JS Anker Slider

[CrazyLopp]

Hi,

ich bin gerade dabei eine Seite mit Ankern aufzubauen, jedoch würde ich gerne einen Slideffekt haben anstatt das traditionelle springen...

Nun ist die Frage wie man das am besten machen kann, etweder über "normales" Javascript oder mithilfe von jQuery? Ich würde am liebsten eine class="" haben die ich dann an die entsprechenden Anker anbringen kann bzw. in die Navigation...

Wie macht man so etwas, oder gibt es so etwas schon fertig?
Am liebsten hätte ich so wenig Code wie es nur geht bzw. das ich das Javascript in eine externe Datei packen könnte da ich mir meinen Code gerne übersichtlich halte ...


Schonmal danke für die Hilfe

Crazylopp

 

[qwertzuio]

AW: JS Anker Slider

das ist auch eine gute idee, den code auszulagern... für javascript gibts ja jede menge ui bibliotheken. ganz allgemein bieten die sich besser als als selbst daran zu arbeiten - gerade auch um browserunabhängigkeit zu garantieren... also jquery, mootools, oder andere bibliotheken und dort nach effekten suchen

 

[Christian]

AW: JS Anker Slider

Grundsätzlich kann ich nur Frameworks à la jQuery, Mootools & Co empfehlen, da sie den entscheidenden Vorteil haben, dass sie schnell und einfach zu implementieren sind und was noch viel wichtiger ist, ist, dass sie Crossbrowser Kompatibel sind, denn wenn Du das ganze in "normalen" Javascript umsetzt, musst Du diverse Browserweichen einbauen. Das macht jetzt nicht so viel Spaß.

<script src="/path/to/mootools.js"></script>
<script>
var scroll = new Fx.Scroll($(document), {
	wait: false,
	duration: 2500,
	offset: {'x': -200, 'y': -50},
	transition: Fx.Transitions.Quad.easeInOut
});
$(window).addEvent('domready',function(){

$$('a[href^=#]').each(function(n){
 $(n).addEvent('click',function(e){ 
   e=new Event(e).stop(); 
   scroll.toElement( $(document).getElement('*[name='+n.href.substring(1)+']' )});
   return false; //Wir wollen ja nicht, dass er trotzdem springt!
});

});
</script>

Sorry für die grausame Einrückung, aber Quelltext in 'ner Textbox schreiben ist pfui bäh!

So, oder so ähnlich müsste das ganze umgesetzt in Mootools aussehen