Dynamické rozhraní na vašem webu upoutá pozornost uživatelů a zvýší provoz. Vytvoření animované hlavičky pro web není tak obtížné, jak se na první pohled zdá.
Instrukce
Krok 1
Pokusme se vytvořit animovanou hlavičku, která změní její konfiguraci, když nad ní umístíte kurzor myši. Například černobílý obrázek v záhlaví byl při interakci převeden na barevný nebo změněn na jiný.
Krok 2
Nainstalujte si do počítače knihovnu jQuery po stažení z oficiálních webových stránek (jquery.com).
Krok 3
Propojte knihovnu se svým souborem html mezi značkami hlavy pomocí značky skriptu:
Krok 4
Vyberte dva obrázky, které se navzájem nahradí při interakci uživatele s hlavičkou. Pokud chcete mít přechod z černé a bílé na barvu, vytvořte kopii obrázku a desaturujte ji ve Photoshopu.
Krok 5
Vytvořte seznam dvou položek v html dokumentu a ke každé připojte obrázky pomocí tagu obrázku. Například použijte třídu stylů na samotný seznam
Krok 6
Udělejte to v divu, který odpovídá za záhlaví vašeho webu. Nejprve zadejte adresu obrázku, která by se měla projevit ve statickém stavu, a poté adresu, která se zobrazí při najetí myší.
Krok 7
Přidejte do prvního obrázku class = "pervaya" a do druhého obrázku class: "vtoraya".
Krok 8
V připojeném souboru css určete absolutní umístění prvků (position: absolute;), pevnou výšku a šířku (výška a šířka) pro tyto třídy.
Krok 9
Vrstvte obrázky na sebe. K tomu použijte styl z-indexu. Umožňuje zarovnat prvky podél osy z, která od nás v hloubce obrazovky odchází.
Krok 10
Pro samotný seznam zadejte odsazení, zarovnání, které potřebujete, a odeberte položky seznamu (list-style-type: none;).
Krok 11
Vytvořte soubor.js a vložte do něj následující kód:
$ (document).ready (function () {
$ ("img.grey"). hover (funkce () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, funkce () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
Krok 12
Tento kód oživí vaši hlavičku v akci. Nezapomeňte připojit soubor.js k html dokumentu.
