Instagram Herz animation

    Moin,


    ich weiß nicht ob ihr auf instagram einen Account habt. Wenn einem dort ein Bild gefällt klickt man doppelt darauf und es wird als gefällt mir markiert. Währenddessen erscheint eine kleine Herz Animation.


    • Man klickt doppelt auf das Bild
    • Es wird ein Herz eingeblendet von klein zu groß und wieder zu klein
    • Das einen ganz weichen Übergang hat


    Die Frage ist, wie wird so etwas gemacht vielleicht gibt es ja schon etwas fertiges in der Richtung.

    Nun, da grundsätzlich erstmal das Event des Doppelklickens, also Likens erkannt werden muss, würde ich sagen, dass JavaScript die Basis liefert. Was dann allerdings genau gemacht wird, kann unterschiedlich sein:


    - Es kann erstmal via CSS eine Schriftart geladen werden ("Webfont"), die das Herz als "Buchstaben" kodiert hat, um dann beim liken eine entsprechende Klasse via JS zu togglen, die eine CSS Animation ablaufen lässt, welche die Schriftgröße ändert
    - Oder es kann diese Animation direkt in JS gescriptet werden
    - Andere Variante wäre ein Bild vom Herz zu laden und dann dessen Höhe und Breite zu ändern, ähnlich wie bei der Schriftart


    Ich würde aber vermuten, dass es eine reine JavaScript Animation ist, ob nun ein Webfont oder ein Bild das Herz liefert.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden