Codecandies

Das Weblog von Nico Brünjes.

Sliden und Scrollen mit jQuery

Elemente eines Webseite ein- und auszublenden gehört ja irgendwie zum Handwerkszeug aller Web2.0-Geschädigten, denn dadurch entstehen Effekte, die an Destop-Anwendungen erinnern, statt an einfache Webseiten. jQuery bringt das Handwerkzeug dazu natürlich schon mit: show/hide, fadeIn/Out, slideDown/Up/Toggle und aninamte. Kombiniert man diese Effekte, kommt man schon relativ weit.

Jedoch, man muss sich andererseits auch vergegenwärtigen, dass es sich um einfache Effekte handelt. Wenig Code, aber auch wenig komfortabel, im Zweifelsfall ein wenig ruppig. So können Einblendeffekte schon mal etwas ruckeln (je nach Browser) und Slides eben auch an der falschen Stelle enden. Mit ein wenig Gehirnschmalz und ein paar Handgriffen kommt man jedoch ebenfals zum Ziel…

Gänzlich nutzlos ist ein Effekt natürlich, wenn man ihn nicht sehen kann. Das passiert zum Beispiel, wenn der Effekt am unteren Ende der Seite stattfinden soll, bspw. beim Einblenden eines Footers. Hier ein Beispiel: Sliding mit slideDown [ggf. Browserfenster ein weig verkleinern].

$(document).ready(function() {
	$(".slideDownClick").click(function() {
	    $(".hidden").slideDown("slow");
	});
});

Klickt man auf den roten Text unten, findet das hineinsliden des unsichtbaren DIV im unsichtbaren, sozusagen unter Ausschluss der Öffentlichkeit statt. Jetzt macht man sich solch eine Arbeit, und dann sowas!

Dieser Frechheit muss begegnet werden. Zum einfachen Sliding-Effekt muss eine Bewegung der Seite zugefügt werden, ein Scrollen also. Eine kurze Überlegung ergibt hier: soll etwas vom unteren Browserfensterrand ins Bild sliden, muss man eigentlich nur scrollen, also animiert scrollen.

Da hatte ich ja mal bei Learning jQuery etwas dazu gelesen, dort werden alle Sprünge zu Ankern mit einer Animation versehen:

// Animated Scrolling with jQuery 1.2
// by Karl Swedberg
// http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12
$(document).ready(function(){
  $('a[href*=#]').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
	&& location.hostname == this.hostname) {
	  var $target = $(this.hash);
	  $target = $target.length && $target
	  || $('[name=' + this.hash.slice(1) +']');
	  if ($target.length) {
		var targetOffset = $target.offset().top;
		$('html,body')
		.animate({scrollTop: targetOffset}, 1000);
	   return false;
	  }
	}
  });
});

Dies wird nun kombiniert:

// Showing an element an scroll to it
$.fn.betterSlide = function(destination) {
	// where in px from top is the element?
    var dest = $(destination).offset().top;
	// show the element and as callback scroll it into the viewport (if not animated)
    jQuery(this).show(1, function() {
		$("html:not(:animated),body:not(:animated)").animate({ scrollTop: dest}, 2000, "swing" );
	});
};

$(document).ready(function() {
	$(".betterSlideClick").click(function() {
	    $(".hidden").betterSlide("#clicker");
	});	
});

Die Demo dazu. Nochmal zur Erklärung: zunächst mal wird nachgesehen, wo das Element ist, zu dem gescrollt werden soll. Da nimmt man ein Element direkt über dem anzuzeigenden Element (siehe auch unten an dieser Seite). Dann zeigen wir unser verborgenenes Element mit show(1) und nutzen die Callbackfunktion von show() (show( speed, callback )) um das Scrolling auszulösen, so findet nicht beides gleichzeitig statt. Animiert werden (und das ist wichtig) <html> bzw. <body>, wenn sie nicht gerade schon animiert werden :not(:animated). Die Zei für den Effekt ist 2000ms, von den beiden in der Standard-jQuery-Version nutzbaren Easing-Methoden linear und swing, habe ich mich für swing entschieden.

Fertig, der Footer scrollt in den Viewport des Browsers.

3 Kommentare

  1. Hallo Nico,

    vielen dank für die klasse Anleitung. Ich habe schon fleißig gegoogelt um ein kleines Script zu finden, mit dem man ein Div aufsliden lassen kann und auch sofort die Seite dabei nach unten gescrollt wird.
    Jetzt fehlt nur noch Teil 2, in dem man den Div Container als Toggle ebenso wieder zusliden lassen kann und die Seite wieder nach oben scrollt, wo sie vor dem öffnen war. Dann wäre das Script perfekt. Vielleicht kommt das ja noch?! ;)

    Frohe Weihnachten,
    Little Joe

  2. Danke für diesen Code-Schnippsel!

    Ich habe das gut gebrauchen können als Teil für mein Plugin. Dein Plugin hat mir so leider nichts geholfen, da es ja nur bei Footern richtig gut funktioniert -- ansonsten scrollt es ja immer, auch wenn das Element schon ganz zu sehen ist, was dann nur unnötig Verwirrung stiften würde, da scrollen normalerweise nicht von der Webseite geregelt wird.
    Deshalb habe ich noch ein paar Tests eingebaut, sodass mein Plugin nun nur dann scrollt, sollte das Element nicht zu sehen sein.
    Ich habe es hier auch veröffentlicht: jQuery Plugin intoViewport.

  3. Cool. So soll es sein. :)

2 Pings

  1. […] wenn jQuery schon Effekte bietet um Bereiche ein- und auszublenden geht es noch einen Tick besser. Einen interessanten Artikel zu diesem Thema liest man auf codecandies.de. (übrigens ein sehr schönes Blog auf das ich über diesen Artikel […]

  2. […] Brünjes schreibt über “Sliden und Scrollen mit jQuery“. Seine Artikel über jQuery wachsen leider nur […]