Marc Grünewald
Kreativer Nerd mit Hoodie
Happy Halloween
Passend zum anstehenden Tage haben wir für euch einen schaurigen Hovereffekt für ein Element vorbereitet, welches sich perfekt für die Ankündigung von Halloween Events auf Webseiten oder allgemeine Webseiten mit Horrorthematik eignet.
Mit der Maus über das Bild hovern
Gesteuert wird dieser Effekt hauptsächlich mithilfe von Keyframes.
Keyframes
Ermöglichen eine Animation, wie eine Bewegung oder ein Zoom mithilfe verschiedenster Parameter. Hierfür gibt man zusätzlich zur Animation an wie lange diese andauern soll. Anschließend kann man mit Prozentwerten bestimmen, was in der Animation zu diesem Zeitpunkt geschehen soll.
Hierfür haben wir mehrere Div-Elemente erstellt und in diesen die Bilder als Background mit verschiedenen Filtern und Größen übereinandergelegt. Diese Layer sind im Normalzustand transparent, abgesehen von dem unveränderten Originalbild. Sobald der Hoverzustand eingeleitet wird, beginnen die Keyframeanimationen. Diese machen die Layer zu bestimmten Zeitpunkten sichtbar und verschieben diese teilweise per background-position Regeln.
By accepting you will be accessing a service provided by a third-party external to https://www.nrml.de/