Pengenalan kepada Animasi Berbasis JQuery

mata teras

animasi berasaskan tatal dan kesan khas adalah teknologi yang membolehkan pemaju web membuat pengalaman web yang dinamik dan interaktif. Mereka dicetuskan apabila pengguna menatal ke halaman dan boleh dimanipulasi dan dilaksanakan dengan CSS dan jQuery.
Untuk mewujudkan kesan berasaskan skrol responsif, sifat lebar dan ketinggian tetingkap penyemak imbas mesti ditakrifkan. Tanpa sifat -sifat ini, kesannya tidak berfungsi dengan betul apabila pengguna mengubah saiz tetingkap.
Tutorial ini menyediakan empat contoh animasi dan kesan berasaskan skrol yang menunjukkan bagaimana ia berbeza berdasarkan nilai atribut lebar tetingkap. Contoh -contoh ini termasuk animasi kelegapan, ketinggian, lebar, kiri, kanan, dan sifat bawah pelbagai elemen.
Tutorial ini juga mengandungi seksyen FAQ yang menyediakan penyelesaian kepada masalah biasa seperti mewujudkan kesan menatal yang lancar, mengesan arah menatal, dan menghentikan animasi jQuery.

Teknologi laman web berubah dengan setiap hari berlalu, teknologi dan teknik baru muncul satu demi satu, dan beberapa teknologi lama secara beransur -ansur dihapuskan. Oleh itu, pereka web dan pemaju front-end mestilah biasa dengan banyak trend reka bentuk web terkini. Parallax menatal, tajuk tetap, reka bentuk rata, laman web halaman tunggal dan animasi adalah beberapa trend web paling hangat pada masa ini.

Dalam tutorial ini, kita akan belajar bagaimana untuk membuat animasi berasaskan skrol dan kesan khas menggunakan CSS dan jQuery.

Anda boleh mengklik demo ini untuk melihat empat kesan khas yang akan kami buat. Tetapi sebelum kita mula menerangkan kesan khas, mari kita memperkenalkannya secara ringkas.

Nota: Kod yang digunakan dalam tutorial ini boleh diperbaiki dengan caching objek dan menggunakan animasi CSS (bukan kaedah JQuery's

), tetapi untuk kesederhanaan, kami mengulangi perisytiharan objek dan meletakkan segala -galanya di dalamnya untuk segala -galanya untuk segala -galanya untuk segala -galanya untuk segala -galanya untuk segala -galanya untuk segala Semua disimpan dalam jQuery untuk memberi tumpuan kepada konsep.

animate() Apakah animasi berasaskan tatal dan kesan khas?

Animasi berasaskan skrol dan kesan khas adalah pendekatan novel dan terkenal yang membolehkan pemaju front-end mewujudkan pengalaman web yang kaya dan interaktif. Mereka dicetuskan apabila pengguna menatal ke halaman dan boleh dimanipulasi dengan mudah dan dilaksanakan menggunakan CSS dan jQuery.

Untuk mengesan sama ada pengguna sedang menatal ke halaman, kami menggunakan acara JQuery's Scroll ().

Sebaik sahaja kita tahu bahawa pengguna sedang menatal, kita boleh menggunakan kaedah jQuery's ScrollTop () untuk mendapatkan kedudukan menegak bar scrollbar tetingkap dan menggunakan kesan khas yang diperlukan:

Adakah mereka responsif?

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 应用特效和动画
    }
});

Jika kita ingin membuat kesan berasaskan tatal responsif, kita mesti menentukan sifat berikut:

Lebar harta tetingkap penyemak imbas.

sifat ketinggian tetingkap penyemak imbas.
2. Jika sifat-sifat ini tidak ditakrifkan, kami akan membuat kesan berasaskan skrol "statik" yang tidak akan berfungsi dengan betul apabila pengguna mengubah saiz tetingkap secara mendatar atau menegak.

kita dapat dengan mudah mengambil nilai -nilai sifat -sifat ini menggunakan kaedah JQuery's Width () dan ketinggian ().

Coretan kod berikut menunjukkan semua cek yang diperlukan yang mesti dipertimbangkan untuk menghasilkan kesan berasaskan tatal.

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 应用特效和动画
    }
});

Sekarang kita telah memperkenalkan asas -asas kesan menatal, mari kita lihat dengan empat contoh yang berbeza.

Nota: Untuk kesederhanaan, kita hanya memberi tumpuan kepada bagaimana kesan -kesan ini berbeza -beza mengikut nilai yang berbeza dari atribut lebar tetingkap. Proses yang sama juga boleh digunakan untuk sifat ketinggian tetingkap.

Contoh #1

Kesan ini akan dicetuskan apabila kedudukan atas bar tatal tetingkap melebihi 60px. Dalam kes ini, coretan kod yang dilaksanakan adalah seperti berikut:

$(window).scroll(function() {
    if ($(this).width() <= 549 && $(this).height() <= 549 && $(this).scrollTop() > 600) {
        // 应用特效
    } else if ($(this).width() > 549 && $(this).width() <= 991 && $(this).scrollTop() > 480) {
        // 应用特效
    } else if ($(this).scrollTop() > 450) {
        // 应用特效
    }
});

Kod di atas menyembunyikan elemen kanak -kanak

dari elemen .banner dan menunjukkan elemen kanak -kanak yang tersembunyi pada mulanya. h2 .info Kod ini juga boleh ditulis seperti ini:

Untuk melihat kesan ini dalam tindakan, lihat demo penuh pada Codepen.

if ($(window).scrollTop() > 60) {
    $('.banner h2').css('display', 'none');
    $('.banner .info').css('display', 'block');
} else {
    $('.banner h2').css('display', 'block');
    $('.banner .info').css('display', 'none');
}

Contoh #2

Kesan khas seterusnya bergantung bukan sahaja pada kedudukan atas bar skrol penyemak imbas, tetapi juga pada lebar tetingkap. Lebih khusus, kami membuat andaian berikut:

Nilai atribut lebar tetingkap kurang daripada atau sama dengan 549px. Dalam kes ini, animasi hanya akan dicetuskan jika kedudukan teratas bar tatal tetingkap melebihi 600px.

1. Nilai atribut lebar tetingkap adalah antara 550px dan 991px. Dalam kes ini, animasi hanya akan dicetuskan jika kedudukan teratas bar tatal tetingkap melebihi 480px.
2. Nilai atribut lebar penyemak imbas lebih besar daripada 991px. Dalam kes ini, animasi hanya akan dicetuskan jika kedudukan teratas bar tatal tetingkap melebihi 450px.
Asumsi di atas membawa kepada coretan kod berikut:

Kod yang mengandungi animasi yang akan dilaksanakan adalah seperti berikut:

if ($(window).scrollTop() > 60) {
    $('.banner h2').hide();
    $('.banner .info').show();
} else {
    $('.banner h2').show();
    $('.banner .info').hide();
}

Kod di atas menghidupkan kelegapan, ketinggian dan lebar untuk unsur -unsur

if ($(window).width() <= 549) {
    if ($(window).scrollTop() > 600) {
        // 执行的动画
        firstAnimation();
    }
} else if ($(window).width() > 549 && $(window).width() <= 991) {
    if ($(window).scrollTop() > 480) {
        // 执行的动画
        firstAnimation();
    }
} else {
    if ($(window).scrollTop() > 450) {
        // 应该执行的动画
        firstAnimation();
    }
}

.

.clients-info Untuk melihat kesan ini dalam tindakan, lihat demo penuh pada Codepen.

(contoh berikutnya 3 dan 4, serta kesimpulan dan bahagian FAQ, disebabkan oleh batasan ruang, sila buat penulisan semula yang sama berdasarkan teks asal, pastikan makna asal tidak berubah, dan gantikan beberapa perbendaharaan kata dan struktur ayat.)

Ingat untuk menyimpan format dan kedudukan asal gambar.

Atas ialah kandungan terperinci Pengenalan kepada Animasi Berbasis JQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!