201224Jan

Scrollorama: jQuery-Plugin für animierte Scroll-Effekte

Wem die Idee hinter der Promo-Website für die iPhone-Anwendung "Ben the bodyguard" gefallen hat, dem wird wahrscheinlich auch das jQuery-Plugin Scrollorama zusagen. Mit dem Skript können DOM-Elemente anhand der aktuellen Scroll-Position des Webbrowsers animiert werden. Sobald also eine bestimmte Position erreicht wird, können beliebige Effekte in einem definierten Zeitraum ausgeführt werden. Dabei werden die Animationen jedoch erst durch das Bewegen der Scroll-Leiste abgespielt.

Scrollorama

Das Plugin ist einfach in der Handhabung: Für jedes zu animierende Element muss ein CSS-Selektor (vorzugsweise eine Klasse) erstellt werden, der dann an das Plugin übergeben wird:

  • $(document).ready(function() {
  • var scrollorama = $.scrollorama({
  • blocks: ".scrollblock"
  • });
  • });

Anschließend können die Blöcke mit gewünschten Effekten belegt werden:

  • scrollorama.animate("#block-1", {
  • duration: 400, property: "opacity"
  • })

Da auch die Website des Plugins von den Scroll-Effekten Gebrauch macht, wird hier schon gut ersichtlich, was sich mit dem Skript anstellen lässt.

RSS-Feed abonnieren