A dynamic interface on your site will grab the attention of users and increase traffic. Making an animated header for a website is not as difficult as it seems at first glance.
Instructions
Step 1
Let's try to make an animated header, which will change its configuration when you hover the mouse cursor over it. For example, a black-and-white picture in a header was converted to color upon interaction or changed to another.
Step 2
Install the jQuery library on your computer after downloading it from the official website (jquery.com).
Step 3
Link the library to your html file between the head tags using the script tag:
Step 4
Select two pictures that will replace each other when the user interacts with the header. If you want to have a transition from black and white to color, then create a copy of the picture and desaturate it in Photoshop.
Step 5
Create a two-item list in the html document and attach pictures to each using the image tag. Apply a style class to the list itself, for example
Step 6
Do this in the div that is responsible for your site header. First, specify the address of the image that should be reflected in a static state, and then the one that appears on hover.
Step 7
Add class = "pervaya" to the first picture, and class: "vtoraya" to the second picture.
Step 8
In the attached css file, specify absolute positioning of elements (position: absolute;), fixed height and width (height and width) for these classes.
Step 9
Layer the pictures on top of each other. Use the z-index style for this. It allows you to align elements along the z-axis, which goes away from us in the depth of the screen.
Step 10
For the list itself, specify the indentation, alignment you need and remove the list items (list-style-type: none;).
Step 11
Create a.js file and paste the following code into it:
$ (document).ready (function () {
$ ("img.grey"). hover (function () {
$ (this).stop (). animate ({"opacity": "0"}, "slow");
}, function () {
$ (this).stop (). animate ({"opacity": "1"}, "slow");
});
});
Step 12
This code will animate your header into action. Don't forget to connect the.js file to the html document.
