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

  • 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
Aus Performance-Gründen werden derzeit nur die letzten 30 Kommentare angezeigt. Eine Paginierung folgt noch

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.