'N Dinamiese koppelvlak op u webwerf sal die aandag van gebruikers trek en die verkeer verhoog. Om 'n geanimeerde koptekst vir 'n webwerf te maak, is nie so moeilik soos dit met die eerste oogopslag lyk nie.
Instruksies
Stap 1
Kom ons probeer 'n geanimeerde opskrif maak wat die opset sal verander wanneer die muisaanwyser daaroor beweeg. Byvoorbeeld, 'n swart-en-wit prentjie in 'n kopskrif is na interaksie in kleur omgeskakel of na 'n ander verander.
Stap 2
Installeer die jQuery-biblioteek op u rekenaar nadat u dit van die amptelike webwerf (jquery.com) afgelaai het.
Stap 3
Koppel die biblioteek aan u html-lêer tussen die kopmerkers met behulp van die skriptag:
Stap 4
Kies twee foto's wat mekaar sal vervang wanneer die gebruiker met die opskrif kommunikeer. As u 'n oorgang van swart en wit na kleur wil hê, moet u 'n kopie van die prentjie maak en dit in Photoshop versadig.
Stap 5
Skep 'n lys van twee items in die html-dokument en heg foto's aan elk met behulp van die prentetiket. Pas byvoorbeeld 'n stylklas op die lys self toe
Stap 6
Doen dit in die afdeling wat verantwoordelik is vir u webwerfkop. Spesifiseer eers die adres van die beeld wat in 'n statiese toestand moet weerspieël word, en dan die adres wat op die muisaanwyser verskyn.
Stap 7
Voeg klas = "pervaya" by die eerste prentjie en klas: "vtoraya" by die tweede prentjie.
Stap 8
Spesifiseer die absolute posisionering van elemente (posisie: absoluut;), vaste hoogte en breedte (hoogte en breedte) vir hierdie klasse in die aangehegte CSS-lêer.
Stap 9
Lê die prente op mekaar. Gebruik die z-indeksstyl hiervoor. Dit laat u toe om elemente langs die z-as in lyn te bring wat in die diepte van die skerm van ons af weggaan.
Stap 10
Spesifiseer die inspringing, belyning wat u benodig vir die lys self en verwyder die lysitems (lystipe: geen;).
Stap 11
Skep 'n.js-lêer en plak die volgende kode daarin:
$ (document).ready (funksie () {
$ ("img.grey"). sweef (funksie () {
$ (hierdie).stop (). animasie ({"ondeursigtigheid": "0"}, "stadig");
}, funksie () {
$ (hierdie).stop (). animasie ({"ondeursigtigheid": "1"}, "stadig");
});
});
Stap 12
Hierdie kode sal u kopteksture tot aksie laat leef. Moenie vergeet om die.js-lêer aan die html-dokument te koppel nie.
