Antaramuka dinamik di laman web anda akan menarik perhatian pengguna dan meningkatkan lalu lintas. Membuat tajuk animasi untuk laman web tidak begitu sukar seperti yang dilihat pada pandangan pertama.
Arahan
Langkah 1
Mari cuba buat header animasi, yang akan mengubah konfigurasi ketika kursor tetikus melayang di atasnya. Sebagai contoh, gambar hitam-putih pada tajuk ditukar menjadi warna semasa interaksi atau ditukar menjadi gambar yang lain.
Langkah 2
Pasang pustaka jQuery di komputer anda setelah memuat turunnya dari laman web rasmi (jquery.com).
Langkah 3
Pautkan pustaka ke fail html anda antara tag kepala menggunakan tag skrip:
Langkah 4
Pilih dua gambar yang akan saling berganti ketika pengguna berinteraksi dengan tajuk. Sekiranya anda ingin melakukan peralihan dari hitam dan putih ke warna, kemudian buat salinan gambar dan desaturasikannya di Photoshop.
Langkah 5
Buat senarai dua item dalam dokumen html dan lampirkan gambar ke masing-masing menggunakan tag gambar. Terapkan kelas gaya ke senarai itu sendiri, misalnya
Langkah 6
Lakukan ini di bahagian yang bertanggungjawab untuk tajuk laman web anda. Pertama, tentukan alamat gambar yang harus dicerminkan dalam keadaan statik, dan kemudian yang muncul pada hover.
Langkah 7
Tambahkan class = "pervaya" ke gambar pertama, dan kelas: "vtoraya" ke gambar kedua.
Langkah 8
Dalam fail css yang dilampirkan, tentukan kedudukan elemen mutlak (kedudukan: mutlak;), tinggi dan lebar tetap (tinggi dan lebar) untuk kelas ini.
Langkah 9
Lapiskan gambar di atas satu sama lain. Gunakan gaya indeks-z untuk ini. Ini membolehkan anda menyelaraskan elemen di sepanjang paksi-z, yang menjauhkan diri dari kita di kedalaman skrin.
Langkah 10
Untuk senarai itu sendiri, tentukan lekukan, penjajaran yang anda perlukan dan hapus item senarai (senarai-gaya-jenis: tidak ada;).
Langkah 11
Buat fail.js dan tampal kod berikut ke dalamnya:
$ (dokumen). sudah (fungsi () {
$ ("img.grey"). arahkan kursor (fungsi () {
$ (this).stop (). animate ({"opacity": "0"}, "lambat");
}, fungsi () {
$ (this).stop (). animate ({"opacity": "1"}, "perlahan");
});
});
Langkah 12
Kod ini akan menggerakkan tajuk anda untuk bertindak. Jangan lupa untuk menyambungkan fail.js ke dokumen html.
