Antworten auf deine Fragen:
Neues Thema erstellen

JS Anker Slider

CrazyLopp

Hat es drauf

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
 

Q

qwertzuio

Guest

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

verpeilt & verschallert

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ß.
Code:
<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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.633
Beiträge
1.538.446
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben