The dynamic interface on your website will draw attention of users and will increase attendance. Make the animated cap for the website not so difficult as it seems at first sight.
Instruction
1. Let's try to make the animated cap which at guidance of the mouse cursor on it will change the configuration. For example, the black-and-white picture in a cap was transformed to color in interaction or was replaced with another.
2. Install JQuery library on the computer, previously having downloaded it on the official site (jquery.com).
3. Connect library to the HTML file between tags of head, using for this purpose the script tag:
.
4. Select two pictures which in interaction of the user with a cap will replace each other. If you want that there was a transition from the black-and-white mode in color, then create the copy of the picture and decolour it in Photoshop.
5. Create in HTML document the list from two points and attach pictures to everyone, using the image tag. Apply a class of styles to the list, for example
6. Do it in that miracle (div) which at you is responsible for a website cap. At first specify the address of the picture which should be reflected in a static status, and then that which to appear when targeting.
7. Register to the first pictures of class= "" pervaya"", and to the second class: ""vtoraya"".
8. Specify in the attached css file for these classes absolute positioning of elements (position: absolute;), the fixed height and width (height and width).
9. Impose pictures at each other layers. Use for this purpose z-index style. It allows to align elements on axis z which leaves us in screen depth.
10. For the list specify indents, alignment necessary to you and remove items of the list (list-style-type: none;).
11. Create the file with the .js extension and insert into it the following code:
$ (document) .ready (function () {
$ (""img.gray"") .hover (
function () {
$ (this) .stop () .animate ({""opacity"": ""0"" }, ""slow"");
},
function () {
$ (this) .stop () .animate ({""opacity"": ""1"" }, ""slow"");
});
});
12. This code will put animation of your cap in action. Do not forget to connect the .js file to HTML document.