Eine dynamische Benutzeroberfläche auf Ihrer Website wird die Aufmerksamkeit der Benutzer auf sich ziehen und den Verkehr erhöhen. Einen animierten Header für eine Website zu erstellen ist nicht so schwierig, wie es auf den ersten Blick scheint.
Anleitung
Schritt 1
Versuchen wir, einen animierten Header zu erstellen, der seine Konfiguration ändert, wenn der Mauszeiger darüber schwebt. Beispielsweise wurde ein Schwarzweißbild in einer Kopfzeile bei Interaktion in Farbe umgewandelt oder in ein anderes geändert.
Schritt 2
Installieren Sie die jQuery-Bibliothek auf Ihrem Computer, nachdem Sie sie von der offiziellen Website (jquery.com) heruntergeladen haben.
Schritt 3
Verknüpfen Sie die Bibliothek mit Ihrer HTML-Datei zwischen den Head-Tags mithilfe des script-Tags:
Schritt 4
Wählen Sie zwei Bilder aus, die sich gegenseitig ersetzen, wenn der Benutzer mit der Kopfzeile interagiert. Wenn Sie einen Übergang von Schwarzweiß zu Farbe haben möchten, erstellen Sie eine Kopie des Bildes und entsättigen Sie es in Photoshop.
Schritt 5
Erstellen Sie eine Liste mit zwei Elementen im HTML-Dokument und fügen Sie jedem Bilder mit dem Image-Tag hinzu. Wenden Sie beispielsweise eine Stilklasse auf die Liste selbst an
Schritt 6
Tun Sie dies in dem Div, das für Ihren Site-Header verantwortlich ist. Geben Sie zuerst die Adresse des Bildes an, das in einem statischen Zustand wiedergegeben werden soll, und dann die Adresse, die beim Hover angezeigt wird.
Schritt 7
Fügen Sie class = "pervaya" zum ersten Bild hinzu und class: "vtoraya" zum zweiten Bild.
Schritt 8
Geben Sie in der angehängten CSS-Datei die absolute Positionierung der Elemente (position: absolute;), feste Höhe und Breite (Höhe und Breite) für diese Klassen an.
Schritt 9
Legen Sie die Bilder übereinander. Verwenden Sie dazu den Z-Index-Stil. Es ermöglicht Ihnen, Elemente entlang der z-Achse auszurichten, die in der Tiefe des Bildschirms von uns weggeht.
Schritt 10
Geben Sie für die Liste selbst die gewünschte Einrückung und Ausrichtung an und entfernen Sie die Listenelemente (list-style-type: none;).
Schritt 11
Erstellen Sie eine.js-Datei und fügen Sie den folgenden Code ein:
$ (Dokument).bereit (Funktion () {
$ ("img.grey"). schweben (Funktion () {
$ (this).stop().animate({"opacity": "0"}, "slow");
}, Funktion () {
$ (this).stop().animate({"opacity": "1"}, "slow");
});
});
Schritt 12
Dieser Code wird Ihren Header zum Handeln animieren. Vergessen Sie nicht, die.js-Datei mit dem HTML-Dokument zu verbinden.
