Dynamiczny interfejs w Twojej witrynie przyciągnie uwagę użytkowników i zwiększy ruch. Wykonanie animowanego nagłówka dla strony internetowej nie jest tak trudne, jak się wydaje na pierwszy rzut oka.
Instrukcje
Krok 1
Spróbujmy zrobić animowany nagłówek, który zmieni swoją konfigurację po najechaniu na niego kursorem myszy. Na przykład czarno-biały obraz w nagłówku został przekonwertowany na kolor po interakcji lub zmieniony na inny.
Krok 2
Zainstaluj bibliotekę jQuery na swoim komputerze po pobraniu jej z oficjalnej strony (jquery.com).
Krok 3
Połącz bibliotekę z plikiem html między tagami head za pomocą tagu skryptu:
Krok 4
Wybierz dwa obrazy, które zastąpią się nawzajem, gdy użytkownik wejdzie w interakcję z nagłówkiem. Jeśli chcesz uzyskać przejście od czerni i bieli do koloru, utwórz kopię obrazu i usuń nasycenie w Photoshopie.
Krok 5
Utwórz listę dwóch elementów w dokumencie html i dołącz do każdego zdjęcia za pomocą znacznika obrazu. Zastosuj klasę stylu do samej listy, na przykład
Krok 6
Zrób to w div, który jest odpowiedzialny za nagłówek Twojej witryny. Najpierw określ adres obrazu, który ma być odbity w stanie statycznym, a następnie ten, który pojawia się po najechaniu.
Krok 7
Dodaj class = "pervaya" do pierwszego zdjęcia, a class: "vtoraya" do drugiego zdjęcia.
Krok 8
W załączonym pliku css określ bezwzględne pozycjonowanie elementów (position: absolute;), stałą wysokość i szerokość (wysokość i szerokość) dla tych klas.
Krok 9
Ułóż obrazy jeden na drugim. Użyj do tego stylu indeksu Z. Pozwala na wyrównanie elementów wzdłuż osi z, która oddala się od nas w głębi ekranu.
Krok 10
Dla samej listy określ wcięcie, wyrównanie i usuń elementy listy (list-style-type: none;).
Krok 11
Utwórz plik.js i wklej do niego następujący kod:
$ (dokument).gotowy (funkcja () {
$ ("img.grey"). najedź na (funkcja () {
$ (this).stop ().animate ({"przezroczystość": "0"}, "slow");
}, funkcja () {
$ (this).stop() animate ({"przezroczystość": "1"}, "slow");
});
});
Krok 12
Ten kod ożywi Twój nagłówek do działania. Nie zapomnij połączyć pliku.js z dokumentem html.
