Animationsfrage Mausverfolgung in Bildern

  • Hallo liebe Mitglieder,


    ich plane in nächster Zeit für mich selbst ein paar Templates zu schreiben und da bin ich auf einer Seite auf etwas gestoßen was mir sehr gefallen hat.

    Die Seite um die es sich handelt ist folgende https://www.glas-goetz.de/home und es geht um die Bilder unter UNSER PRODUKTPORTFOLIO.

    Hier wird die Maus praktisch verfolgt von den Überblendungen in den Bildern bzw. die Überblendung beginnt da wo ich mit der Maus ins Bild fahre.


    schafft man sowas rein mit HTML und CSS oder wurde der Effekt mit Javascript geschrieben?

    Und wie ist der Ansatz, mir fällt nämlich nicht ein wie ich die Seite eines Bildes abfragen kann über die die Maus fährt?

  • Das wird wohl mit JS gemacht sein.


    Dabei es handelt sich auch nicht unbedingt um eine urtypische Mausverfolgung, sondern vielmehr um ein hover-Ererignis, bei dem einfach gefragt wird, ob man sich am linken oder rechten Rand befindet, um den Effekt von dem Rand aus zu starten. Wenn Du Deine Maus schnell über die Bilder bewegst, entsteht halt der Eindruck, dass es eine Mausverfolgung ist.

  • Ja genau das habe ich schon verstanden :) das es nur so aussieht.

    Wenn ich mal Zeit habe versuche ich mich da mal rein zu lesen, vielleicht schaffe ich es ja hier eine funktionierende Lösung zu präsentieren.

  • vielleicht schaffe ich es ja hier eine funktionierende Lösung zu präsentieren.

    Was hast du den jetzt vor ?

    Eine richtige Mausverfolgung zu erstellen ?

    Oder deine verlinkung nachzubauen.

    Das nachbauen ohne Js wird wohl kaum möglichsein. Mit Css kannst du die position der Maus nicht rausfinden. Auser du machts dir viele unsichtbare Container und spielst dann mit hover rum.Mit genug Container könnte an sowas wie eine Mausverfolgung bauen


    Aber schöne Idee. Ich habe jetzt auch langeweile und spiele rum

Jetzt mitmachen!

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