Ini adalah efek khusus dari berbagai gaya tata letak tata letak halaman dengan efek yang sangat keren. Dalam efek khusus ini, tayangan slide diaktifkan melalui tombol navigasi depan dan belakang, dan gambar di setiap slide memiliki efek tata letak yang berbeda.
Efek slide ini menggunakan anime.js untuk membuat efek animasi untuk slide dan menggunakan banyak properti CSS3. Ini membutuhkan versi terbaru dari browser modern untuk melihat efeknya. Untuk IE Browser, efek sebelumnya dapat dilihat di browser dengan IE11 dan di atas. Efek terakhir tidak dapat dilihat karena IE Browser tidak mendukung atribut jalur klip SVG.
Cara menggunakan
Struktur HTML
Struktur HTML dasar dari slide ini adalah sebagai berikut: Setiap slide memiliki kelas kelas tata letaknya sendiri dan properti lerai data untuk membuat efek animasi sendiri.
<Div> <Div Data-layout = "tata letak1"> <div> <div> <div style = "latar belakang-gambar: url (img/1.jpg);"> </div> </div> <v> <div style = "latar belakang-gambar: url (img/2.jpg);"> </div> </div> <div> </div> </latar belakang = " url (img/3.jpg); "> </div> </div> </div> <div> <h3> Sekarang atau tidak pernah </h3> <p> ... <a href ="#"> Baca lebih lanjut </a> </p> </div> </div> <!-/slide-> <Div Data-leliout =" tata letak2 "> </div> <!-/slide-> <Div Data-leliout =" tata letak2 "> </div> <!-<!-<! /tayangan slide ->
Gaya CSS
Inilah gaya CSS untuk salah satu tata letak:
/ * Tata letak 1: 3 gambar kisi */. Slide-layout-1 .slide__img {position: absolute; Lebar: Calc (50% - 1EM); } .slide-layout-1 .slide__img: anak pertama {kiri: 0.5em; Tinggi: 100%; } .slide-layout-1 .slide__img: nth-child (n + 2) {kiri: calc (50% + 0.5em); Tinggi: Calc (50% - 0,5em); } .slide-layout-1 .slide__img: nth-child (3) {top: calc (50% + 0,5em);}Hasilnya ditunjukkan pada gambar di bawah ini:
Javascript
Efek animasi dari setiap tata letak slide didefinisikan dalam file JS. Strukturnya adalah: [nama tata letak]: {out: {menavigasi properti}, di: {menavigasi di properti}}. Efek animasi yang berbeda dapat diatur untuk masuk dan meninggalkan slide. Kode berikut adalah kode sampel untuk tata letak pertama:
Mlslideshow.prototype.options = {// posisi mulai. startIdx: 0, // Konfigurasi tata letak. // [layout name] : { out : {navigating out properties}, in : {navigating in properties} } layoutConfig : { layout1 : { out : { translateX : { next: '-100%', prev: '100%' }, rotateZ : { next: function(el, index) { return anime.random(-15, 0); }, prev: function (el, index) {return anime.random (0, 15); } }, opacity : 0, duration: 1200, easing : 'easeOutQuint', itemsDelay : 80 }, in : { resetProps : { translateX : { next: '100%', prev: '-100%' }, rotateZ : { next: function(el, index) { return anime.random(0, 15); }, prev: function (el, index) {return anime.random (-15, 0); }}, opacity: 0,}, translatex: '0%', rotatez: 0, opacity: 1, durasi: 700, memudahkan: 'easeoutquint', itemsdelay: 80}}, tata letak2: { / * ... * /}, tata letak3: { / * ... * /}, / * ...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.