Sliden und Scrollen mit jQuery

Thema:

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.

Noch keine Kommentare.

Datenschutzhinweis

Daten die in dieses Formular eingegeben werden, werden mit Hilfe des Dienstes welcomments.io verarbeitet. Dabei fallen die in der Datenschutzerklärung dieses Dienstes aufgeführten Daten (IP-Adresse, Browserversion) an, die dort auch gespeichert werden. Gebe keine persönlichen Daten in dieses Formular ein, im Zweifelsfall nutze einen Spitznamen, alles eingegebene wird hier öffentlich angezeigt. Es werden keine Cookies gespeichert, lediglich der Kommentartext wird im Localstorage des Browsers zwischengespeichert.

GitHub-flavored Markdown und einfache HTML-Tags werden unterstützt.

Hinweis…

Diese Seite enthält Videos von Youtube. Diese sind standardmäßig deaktiviert. Falls Du unten auf „Ja“ klickst, werden Daten von Youtube auf Deinen Rechner geladen und so mindestens Deine IP-Adresse an Youtube weiter gegeben. Cookies werden nicht verwendet. Mehr Infos.

Möchtest du Youtube auf dieser Seite aktivieren?