Een dynamische interface op uw site trekt de aandacht van gebruikers en verhoogt het verkeer. Het maken van een geanimeerde header voor een website is niet zo moeilijk als het op het eerste gezicht lijkt.
instructies:
Stap 1
Laten we proberen een geanimeerde koptekst te maken, die de configuratie zal veranderen wanneer de muiscursor erover beweegt. Een zwart-witafbeelding in een koptekst werd bijvoorbeeld bij interactie omgezet in kleur of veranderd in een andere.
Stap 2
Installeer de jQuery-bibliotheek op uw computer nadat u deze hebt gedownload van de officiële website (jquery.com).
Stap 3
Koppel de bibliotheek aan uw html-bestand tussen de head-tags met behulp van de scripttag:
Stap 4
Selecteer twee afbeeldingen die elkaar zullen vervangen wanneer de gebruiker interactie heeft met de koptekst. Als je een overgang van zwart-wit naar kleur wilt, maak dan een kopie van de afbeelding en verzadig deze in Photoshop.
Stap 5
Maak een lijst van twee items in het html-document en voeg afbeeldingen toe aan elk met behulp van de afbeeldingstag. Pas bijvoorbeeld een stijlklasse toe op de lijst zelf
Stap 6
Doe dit in de div die verantwoordelijk is voor je site header. Geef eerst het adres van de afbeelding op dat moet worden weergegeven in een statische status en vervolgens het adres dat bij de muisaanwijzer wordt weergegeven.
Stap 7
Voeg class = "pervaya" toe aan de eerste afbeelding en class: "vtoraya" aan de tweede afbeelding.
Stap 8
Specificeer in het bijgevoegde css-bestand de absolute positionering van elementen (positie: absoluut;), vaste hoogte en breedte (hoogte en breedte) voor deze klassen.
Stap 9
Leg de afbeeldingen op elkaar. Gebruik hiervoor de z-index stijl. Hiermee kunt u elementen uitlijnen langs de z-as, die van ons weggaat in de diepte van het scherm.
Stap 10
Geef voor de lijst zelf de inspringing en uitlijning op die u nodig hebt en verwijder de lijstitems (lijststijltype: geen;).
Stap 11
Maak een.js-bestand en plak de volgende code erin:
$ (document).klaar (functie () {
$ ("img.grijs"). muisaanwijzer (functie () {
$ (dit).stop (). animeren ({"dekking": "0"}, "langzaam");
}, functie () {
$ (dit).stop (). animeren ({"dekking": "1"}, "langzaam");
});
});
Stap 12
Deze code zal uw header in actie brengen. Vergeet niet het.js-bestand aan het html-document te koppelen.
