Parallax, Bootstrap und jQuery
Code Sources Icon Code Sources Icon Code Sources Icon

Da Safari mit der CSS-Eigenschaft "Scroll-behavior" streikt, kann das aufwändiger mit jQuery gebaut werden.
Der Quelltext wurde erfolgreich in die Zwischenablage kopiert.
HTML Elemente

Parameter

Die CSS-Lösung mit "SmoothScroll" wird von älteren Browserversionen und Safari nicht unterstützt. Die Lösung mit jQuery ist aufwändiger, bedingt Javascript, bietet aber interessante Parameter um das Scrollverhalten zu steuern.

  • Wird eine Affix-Navigation verwendet ist die ideale Scrollposition zum anhalten der Animation nicht der obere Browserrand. Die Navigation, da sie nicht mitgescrollt wird, braucht eine bestimmte Höhe. Das ergiebt für den idealen ScrollPunkt einen Versatz dieses Wertes.
  • Eigenschaften wie Scroll-Tempo, Delay (Zeitspanne zwischen Klick und Animation) und Offset (Abstand zwischen Scrollposition und Browserrand oben) können angepasst werden.
  • Zusätzlich kann eine beliebige Ankerposition als Link aufgerufen werden, auf die beim Start der Seite gescrollt wird.
    window.setTimeout(function(){
      $('html, body').animate({
        scrollTop: $( window.location.hash ).offset().top -50  /* Pixelversatz am oberen Rand */
      }, 2000); /* Tempo */
    }, 250);  /* Delay */
DB-Table: parallax-jquery