Playground
Auf den folgenden Seiten habe ich kleine Demos und Code-Snippets aufbereitet, die schöne Ergänzungen und Anregungen für verschiedene Website-Komponenten zeigen.
Inhalte einblenden, sobald diese im Sichtfeld/Viewport sind
In diesem Playground stelle ich vor, was man mit ein wenig CSS und jQuery machen kann um eine Seite aufzuwerten. Einem Benutzer gefällt es immer, wenn sich eine Webseite individuell anpasst. Allerdings darf man die Animationen natürlich nicht übertreiben oder sogar so weit treiben, dass sie dem User eher als Nachteil angesehen wird.
Sobald das CSS eingebunden ist, braucht man nur die Klassen für die Richtungen an die Elemente setzen, die man animieren möchte. Das jQuery Plugin Appear wird benutzt um zu gucken, ob ein Element im Viewport ist und setzt dann die benötigte Klasse um die CSS Animation zu starten.
Viel Spaß mit dem Playground.
Nachtrag:
Ich werde noch ein Tutorial schreiben, in dem ich alle Funktionsweisen und den Code erkläre.
Kommentare
ich habe es mal lokal getestet und es funktioniert soweit ganz gut.
Wäre es möglich, sobald ein Element durch scrollen den Viewport verlässt, dass dann die Klasse "animated" wieder entfernt wird?
Das JS Plugin findest du hier:
https://michalsnik.github.io/aos/
Grüße André
Danke
das Tutorial gibt es noch nicht. Wenn ich Zeit habe, werde ich aber eins erstellen. Was klappt denn bei dir nicht?
Grüße André
Wollte sowas schon vor langem anwenden ;)
Mirco
Hinterlasse einen Kommentar