Une interface dynamique sur votre site attirera l'attention des utilisateurs et augmentera le trafic. Créer un en-tête animé pour un site Web n'est pas aussi difficile qu'il n'y paraît à première vue.
Instructions
Étape 1
Essayons de créer un en-tête animé, qui changera de configuration lorsque le curseur de la souris passera dessus. Par exemple, une image en noir et blanc dans un en-tête a été convertie en couleur lors de l'interaction ou changée en une autre.
Étape 2
Installez la bibliothèque jQuery sur votre ordinateur après l'avoir téléchargée depuis le site officiel (jquery.com).
Étape 3
Liez la bibliothèque à votre fichier html entre les balises head à l'aide de la balise script:
Étape 4
Sélectionnez deux images qui se remplaceront lorsque l'utilisateur interagit avec l'en-tête. Si vous souhaitez passer du noir et blanc à la couleur, créez une copie de l'image et désaturez-la dans Photoshop.
Étape 5
Créez une liste de deux éléments dans le document html et joignez des images à chacun en utilisant la balise image. Appliquer une classe de style à la liste elle-même, par exemple
Étape 6
Faites-le dans le div responsable de l'en-tête de votre site. Tout d'abord, spécifiez l'adresse de l'image qui doit être reflétée dans un état statique, puis celle qui apparaît au survol.
Étape 7
Ajoutez class = "pervaya" à la première image, et class: "vtoraya" à la deuxième image.
Étape 8
Dans le fichier css joint, spécifiez le positionnement absolu des éléments (position: absolu;), la hauteur et la largeur fixes (hauteur et largeur) pour ces classes.
Étape 9
Superposez les images les unes sur les autres. Utilisez le style z-index pour cela. Il vous permet d'aligner des éléments le long de l'axe z, qui s'éloigne de nous dans la profondeur de l'écran.
Étape 10
Pour la liste elle-même, spécifiez l'indentation, l'alignement dont vous avez besoin et supprimez les éléments de la liste (list-style-type: none;).
Étape 11
Créez un fichier.js et collez-y le code suivant:
$ (document).ready (fonction () {
$ ("img.grey"). survolez (une fonction () {
$ (this).stop().animate ({"opacity": "0"}, "slow");
}, une fonction () {
$ (this).stop().animate ({"opacity": "1"}, "slow");
});
});
Étape 12
Ce code animera votre en-tête en action. N'oubliez pas de connecter le fichier.js au document html.
