Untuk pengembang situs web, menambahkan efek geser atau korsel ke konten tampilan adalah kebutuhan yang sangat umum. Ada begitu banyak plug-in carousel yang dibayar dan gratis. Banyak dari mereka menawarkan banyak opsi konfigurasi yang berguna dan efek dinamis.
Sering kali, jika proyek Anda membutuhkan korsel yang ringan, tidak membutuhkan banyak fitur. Pada saat yang sama, proyek Anda adalah menggunakan bootstrap, (kerangka kerja front-end open source yang paling populer). Anda dapat merujuk ke komponen bootstrap resmi.
Artikel ini akan menunjukkan kepada Anda cara menambahkan efek animasi yang menarik ke korsel bootstrap. Pada saat yang sama, pastikan bahwa komponen JS ini diperluas secara bebas dan dimulai dengan cepat.
Pengantar animate.css
Untuk membuat efek animasi, saya menulis sendiri layak dipuji, saya menggunakan Perpustakaan Animasi CSS3 Sumber Terbuka yang sangat terkenal, yang dengan jelas disebut Animate.css. Ditulis oleh Dan Eden.
Ini adalah kode yang memungkinkan saya untuk fokus pada tugas yang ada, daripada menjelaskan animasi CSS3.
Menggunakan animate.css membutuhkan 2 langkah:
1. Memperkenalkan animate.min.css dalam dokumen HTML.
2. Tambahkan kelas animasi yourchosenanimation ke elemen untuk menjadi animasi di halaman web.
Selanjutnya, Anda menggunakan nama kelas tentang animasi yang Anda lihat di situs web Animate.css untuk menggantikan Yourchosenanimation.
Memperkenalkan komponen korsel bootstrap
Komponen korsel bootstrap memiliki tiga bagian utama.
--- Carousel menunjukkan jumlah halaman yang ditampilkan pada slide , memberi pengguna petunjuk visual dan menyediakan navigasi geser.
--- Entri korsel , sebuah kelas yang disebut .Carousel-inner, terkandung di perbatasan luar. Mewakili setiap slider independen. Gambar dapat ditempatkan di setiap gambar. Anda juga dapat menambahkan judul. Anda juga dapat menambahkan nama kelas carousel-caption pada elemen HTML. Bootstrap akan memiliki gayanya sendiri. Kami dapat menambahkan animasi melalui elemen -elemen ini.
--- Akhirnya, ada panah kontrol carousel , yang merupakan fungsi yang memungkinkan pengguna untuk menggeser bolak-balik.
Untuk hanya menampilkan demo, tidak ada gambar yang akan ditambahkan. Fokus pertama pada bingkai carousel sebagai animasi.
Membangun struktur html
Inilah yang Anda butuhkan untuk mengutip proyek Anda:
jQuery
CSS dan JavaScript Bootstrap
Animate.css
Dokumentasi Stylesheet dan JS.
Untuk mempercepat proses pengembangan, templat dan file yang diperlukan dirujuk dari situs web resmi Bootstrap.
Di bawah ini adalah kode korsel bootstrap :
<Div id = "carousel-example-generic" data-ride = "carousel"> <!-indikator-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "#carousel-example-generik" data-slide-to = " data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div role="listbox"> <!-- First slide --> <div> <div> <h3 data-animation="animated bounceInLeft"> This is the caption for slide 1 </h3> <h3 data-animation="animated bounceInRight"> Ini adalah keterangan untuk slide 1 </h3> <tombol data-animasi = "animasi zoominup"> tombol </button> </div> </div> <!-/.item-> <!-slide kedua-> <div> <ind> <ind "data-animation =" animasi bouncing "> <span> </span> </H3 Data =" animasi houncing bouncing "> <span> </span> </hev3 bounceInUp"> This is the caption for slide 2 </h3> <button data-animation="animated zoomInRight">Button</button> </div> </div><!-- /.item --> <!-- Third slide --> <div> <div> <h3 data-animation="animated zoomInLeft"> <span></span> </h3> <h3 data-animation="animated flipinx "> Ini adalah keterangan untuk slide 3 </h3> <tombol data-animasi =" animasi lightspeedin "> tombol </buton> </div> </div> <!-/.item-> </div> <!-/.carousel-inner-" DATA "-KUNCIPLE-> <a href ="#CAROUSEL-INNEX = "KUCKED" "DATA" "DATA (> <a href ="#spanel- " aria-hidden = "true"> </span> <span> sebelumnya </span> </a> <a href = "#carousel-example-generic" role = "button" data-slide = "next"> <span aria-hidden = "true"> </span> <pan> berikutnya </span> </a> </div> <!-/.care <span> Next <pan> </a> </div> <!-/.careR> </span> Next <span> </a> </div> <!-/.careR> </span> Next <span> </a> </div> <!-/.careR> Next <pan> </a> </Div> <!-/.careR> Next <pan> </a> </div> <!-/.careR> NEXT </span> </a> </div> <!-/
Jika kode di atas tidak salah, Anda akan melihat korsel yang dapat berjalan saat membukanya di browser. Segala sesuatu di atas tidak berisi baris kode JavaScript. Jika Anda tidak menambahkan gambar apa pun,
Cukup tambahkan nilai min-height ke blok kelas .carousel.
Tambahkan atribut animasi-animasi data ke elemen di dalam judul Carousel, menggunakan pustaka animasi khusus ini sebagai nilainya.
Jika Anda ingin mengalami animasi lain dari perpustakaan Animate.css, gunakan nama kelas animasi pilihan Anda alih-alih nilai properti animasi data.
Kami menggunakan nilai atribut animasi data dalam kode JavaScript.
Meskipun korsel otomatis sederhana dapat ditemukan dalam beberapa kasus, kami memiliki lebih banyak kendali atas kasus ini.
Pada langkah pertama dalam arah ini, hapus nilai data-ride = "carousel" dari elemen, dan inisialisasi nilai atribut data-ride tanpa menulis kode apa pun. Namun, kami bermaksud menggunakan kode JS untuk mengontrol korsel, sehingga properti berkendara data ini tidak perlu.
Tambahkan gaya CSS ke korsel
Sekarang gunakan kreativitas Anda untuk menambahkan gaya ke judul carousel sesuai dengan preferensi Anda. Aturan gaya yang akan saya tulis adalah demo yang bekerja dengan lancar.
Lebih khusus lagi, kami meningkatkan kontrol properti penundaan animasi. Tentukan ketika setiap animasi dimulai (perhatikan bahwa untuk demonstrasi sederhana, awalan browser dihilangkan)
.carousel-caption h3: anak-anak pertama {animasi-delay: 1s;}. Carousel-caption h3: nth-child (2) {animasi-delay: 2s;}. Tombol Carousel-Caption {Animation-Delay: 3s;}Dalam cuplikan kode di atas, pastikan bahwa animasi elemen dimulai dengan cara yang tertib. Efek lain bisa dilakukan. Misalnya, Anda dapat memilih dua judul pertama yang muncul secara bersamaan. Lalu ada tombol tombol. Anda dapat memutuskan sendiri dan bersenang -senang.
Tulis kode jQuery:
Kami mulai menginisialisasi korsel ini dan menambahkan kode ke file JavaScript khusus Anda:
var $ mycarousel = $ ('#carousel-example-generic'); // inisialisasi carousel $ mycarousel.carousel ();Kami telah mengatur korsel secara dinamis, dan selanjutnya, mari kita selesaikan animasi ini.
Untuk menghidupkan judul slide pertama, skrip harus berjalan setelah halaman dimuat di browser. Slideshow berikutnya memasuki bidang pandang kami di bawah animasi, dan kode kami berjalan pada acara slide.bs.carousel. Artinya kode yang sama berjalan dua kali: halaman memuat sekali dan acara slide.bs.carousel sekali.
Karena kami suka mengikuti prinsip non-pengalihan, kami bermaksud merangkum kode kami dalam fungsi dan merujuknya jika perlu.
Kode:
function doanimations (elems) {var animendev = 'webkitanimationend animationend'; elems.each(function () { var $this = $(this), $animationType = $this.data('animation'); // Add animate.css classes to // the elements to be animated // Remove animate.css classes // once the animation event has ended $this.addClass($animationType).one(animEndEv, function () { $ this.removeclass ($ animationType);}); functionDoAnimations ($ firstAnimatingElems); // Jeda carousel $ mycarousel.carousel ('jeda'); // lampirkan fungsi doanimations () fungsi carousel. $ (E.RelatedTarget) .find ("[data-animasi ^= 'animasi']");Mari kita analisis kode di atas.
Lihat fungsi doanimations ()
Tugas yang dilakukan oleh fungsi doanimations () ini adalah sebagai berikut.
Dimulai dengan string cache yang berisi nama acara Animationend dalam variabel. Acara ini memberi tahu kami bahwa Anda mungkin sudah menebak ketika setiap animasi berakhir. Kami membutuhkan informasi untuk poin ini, karena setelah setiap animasi selesai, kami menghapus kelas Animate.CSS. Jika kita tidak melakukan penghapusan, judul korsel hanya akan memiliki animasi sekali, yaitu, hanya menampilkan slide spesifik di carousel pertama.
var animationendev = 'webkitanimationend animationend';
Selanjutnya, fungsi kami meluncur melalui setiap elemen, kami ingin memiliki animasi dan mendapatkan nilai properti dari animasi data. Pikirkan apa yang disebutkan di atas, nilai ini berisi kelas animate.css yang ingin kami tambahkan ke elemen sehingga memiliki efek animasi.
elems.each (function () {var $ this = $ (this), $ animationType = $ this.data ('animation'); // dll ...});Akhirnya, fungsi doanimations () secara dinamis menambah setiap elemen dari kelas Animate.CSS untuk menjalankan animasi. Ketika animasi berakhir, acara mendengarkan juga terpasang. Setelah animasi selesai, kami menghapus kelas yang ditambahkan dari Animate.css. Ini memastikan bahwa korsel berikutnya kembali ke area saat ini. (Anda mencoba menghapus kode ini dan melihat apa yang terjadi)
$ this.addclass ($ animationType) .one (animendev, function () {$ this.removeclass ($ animationType);});Animasi judul pertama
Ketika halaman dimuat di browser, kami menghidupkan konten di slide pertama:
var $ firstanimatingElems = $ mycarousel.find ('. Item: first') .find ("[data-animasi ^= 'animasi']"); doanimations ($ firstanimatingElems);Dalam kode ini kami menemukan lampu pertama, kami ingin mendapatkan nilai atribut animasi dari judul animasi dengan menggunakan data-animasi. Kemudian kami melewati variabel $ firstanimatingElems sebagai parameter ke fungsi doanimations (), dan kemudian menjalankan fungsi.
Fungsi berhenti korsel
Ketika konten layar pertama telah dieksekusi, kami menghentikan fungsi korsel ini.
$ mycarousel.carousel ('jeda');
Ini adalah fitur di mana komponen korsel bootstrap mencegah rotasi konstan. Rotasi konstan mungkin membuat pengunjung tidak bahagia.
Dalam hal ini, saya sarankan memastikan korsel tidak mengulang langsung ke cahaya berikutnya sampai semua animasi berjalan. Ini dapat dikontrol dengan mengatur opsi "interval" dalam kode inisialisasi:
$ mycarousel.carousel ({interval: 4000});Menurut pendapat saya, judul Carousel Loop Infinite melonjak setiap kali slide menjadi penglihatan tidak ideal.
Animasi judul slide carousel
Langkah -langkah yang dijelaskan di bawah ini diperlukan untuk menjadi terlihat untuk setiap judul korsel animasi slide.
Pertama, kami menambahkan pendengar acara di slide.bs.carousel.
Acara segera menyala ketika metode instance slide dipanggil.
$ mycarousel.on ('slide.bs.carousel', function (e) {// lakukan barang ...});Selanjutnya, kami memilih lampu saat ini dan menemukan elemen yang ingin kami tambahkan animasi. Kode berikut menggunakan properti .relatedTarget dari acara slide.bs.carousel untuk mengikat animasi.
var $ animatingelems = $ (E.relatedTarget) .find ("[data-animasi ^= 'animated']");
Akhirnya, kami menyebut fungsi doanimations () dan lulus $ animatingelems sebagai parameter.
doanimations ($ animatingelems);
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis
Berbagi topik yang indah: gambar jQuery carousel javascript gambar carousel bootstrap carousel
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.