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.

Zurück zur Übersicht

Inhalte einblenden, sobald diese im Sichtfeld/Viewport sind

#Playground#jQuery#CSS

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

  • TYPO3 Programmierer
    Hallo,
    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?
    Antworten
    • Andre Rinas
      Hey, mitlerweile gibt es ein JS Plugin, dass viel mehr Möglichkeiten bietet, eben auch dass die Animation zurückgesetzt wird, sobald das Element den ViewPort verlässt. Das benutze ich auch hier auf meiner Seite. Habe dafür auch die tt-content Tabelle erweitert und kann alle Einstellungen pro CE vornehmen und somit alle Animationen direkt anpassen.
      Das JS Plugin findest du hier:
      https://michalsnik.github.io/aos/
      Grüße André
      Antworten
  • Thushi
    Hallo gib es ein tutorial für "Inhalte einblenden, sobald diese im Sichtfeld/Viewport sind" bei mir klappt das irgendwie nciht.
    Danke
    Antworten
    • Andre Rinas
      Hallo Thushi,
      das Tutorial gibt es noch nicht. Wenn ich Zeit habe, werde ich aber eins erstellen. Was klappt denn bei dir nicht?
      Antworten
  • Karl
    Coole Arbeit! Mir sind - neben den Animationen - aber auch vor allem die Bilder ins Auge gefallen. Woher kriegst du Bilder solcher Art?
    Antworten
    • Andre Rinas
      Hallo Karl, die Icons habe ich von der Seite https://icons8.com/

      Grüße André
      Antworten
  • IT Masters
    Vielen Dank für diese Information. Sehr gelungener Beitrag. Grüße
    Antworten
  • Mirco
    Super Beiträge.
    Wollte sowas schon vor langem anwenden ;)

    Mirco
    Antworten

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.