Antarmuka dinamis di situs Anda akan menarik perhatian pengguna dan meningkatkan lalu lintas. Membuat header animasi untuk situs web tidak sesulit kelihatannya pada pandangan pertama.
instruksi
Langkah 1
Mari kita coba membuat header animasi, yang akan mengubah konfigurasinya saat kursor mouse berada di atasnya. Misalnya, gambar hitam-putih di header diubah menjadi warna saat berinteraksi atau diubah ke yang lain.
Langkah 2
Instal perpustakaan jQuery di komputer Anda setelah mengunduhnya dari situs web resmi (jquery.com).
Langkah 3
Tautkan perpustakaan ke file html Anda di antara tag kepala menggunakan tag skrip:
Langkah 4
Pilih dua gambar yang akan saling menggantikan saat pengguna berinteraksi dengan header. Jika Anda ingin memiliki transisi dari hitam putih ke warna, buat salinan gambar dan desaturasi di Photoshop.
Langkah 5
Buat daftar dua item dalam dokumen html dan lampirkan gambar ke masing-masing menggunakan tag gambar. Terapkan kelas gaya ke daftar itu sendiri, misalnya
Langkah 6
Lakukan ini di div yang bertanggung jawab atas header situs Anda. Pertama, tentukan alamat gambar yang harus direfleksikan dalam keadaan statis, lalu yang muncul saat melayang.
Langkah 7
Tambahkan class = "pervaya" ke gambar pertama, dan class: "vtoraya" ke gambar kedua.
Langkah 8
Dalam file css terlampir, tentukan posisi absolut elemen (posisi: absolut;), tinggi dan lebar tetap (tinggi dan lebar) untuk kelas-kelas ini.
Langkah 9
Lapisi gambar di atas satu sama lain. Gunakan gaya indeks-z untuk ini. Ini memungkinkan Anda untuk menyelaraskan elemen di sepanjang sumbu z, yang menjauh dari kami di kedalaman layar.
Langkah 10
Untuk daftar itu sendiri, tentukan lekukan, perataan yang Anda butuhkan dan hapus item daftar (tipe gaya daftar: tidak ada;).
Langkah 11
Buat file.js dan tempel kode berikut ke dalamnya:
$ (dokumen).ready (fungsi () {
$("img.abu-abu").arahkan (fungsi () {
$ (ini).stop (). animate ({"opacity": "0"}, "lambat");
}, fungsi () {
$ (ini).stop (). animate ({"opacity": "1"}, "lambat");
});
});
Langkah 12
Kode ini akan menganimasikan tajuk Anda ke dalam tindakan. Jangan lupa untuk menghubungkan file.js ke dokumen html.
