Penggeser paling sederhana dan terkecil di dunia
Sebagai perancang tata letak pada saat itu, saya sangat memahami cara kerja plugin dan berulang kali melihat-lihat bagian depan dengan pikiran yang ingin tahu, mencoba mencapai minifikasi kode dan mengoptimalkan pekerjaan dengan CSS atau tata letak yang sama.
Slider lahir setelah beberapa percobaan dengan indeks-z dan, yang mengejutkan saya, programnya hanya 10 baris. Saya tidak mengubah gambar menjadi gambar latar belakang dan meninggalkan kemampuan untuk menggulir bahkan melalui blok tata letak.
Berikut adalah HTML untuk wadah adegan:
<figure>
<img src="./graphics/R-1.png" alt="RevolveR Labs" />
<img src="./graphics/R-2.png" alt="RevolveR Labs" />
<img src="./graphics/R-3.png" alt="RevolveR Labs" />
<img src="./graphics/R-4.png" alt="RevolveR Labs" />
</figure>
Mari tambahkan beberapa CSS yang akan memuat tag gambar ke dalam satu dek di X: 0 dan Y: 0 (atas: 0px dan kiri: 0px):
figure {
background: repeating-linear-gradient(45deg, transparent, transparent .1vw, #ffffff45 .1vw, #b7754594 .25vw), linear-gradient(to bottom, #eeeeee5c, #bfbfbf1a);
box-shadow: inset 0 0 1vw #000;
outline: .2vw solid #b1917fbd;
border: .1vw dashed #999;
display: inline-block;
text-align: center;
position: relative;
overflow: hidden;
margin: 0 auto;
width: 36.46vw;
height: 22vw;
}
figure img {
position: absolute;
width: 36.46vw;
height: 22vw;
opacity: 1;
left: 0;
top: 0;
}
Saya tidak lagi menggunakan nilai statis seperti PX dalam tata letak karena tampilan 8K dan lebih banyak monitor, tetapi saya melakukan semuanya pada unit port tampilan yang dapat diskalakan, yang memungkinkan saya menghindari tangga ke kueri media dan antarmuka desain untuk resolusi layar apa pun.
Sekarang mari kita tulis penangan JavaScript yang hanya akan membalik-balik dek tanpa efek apa pun dengan interval waktu:
var e = document.querySelectorAll('figure img');
let i = 0;
if(e) {
void setInterval(() => {
e[i].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
e[i].style.zIndex = 1;
}, 3000);
}
Kami menggunakan setInteval untuk vakum saat inisialisasi selama 3 detik dan mengimplementasikan iterator yang dapat disetel ulang pada pseudo loop. Pada setiap detakan pengatur waktu berikutnya, ubah indeks-z dari gambar yang diinginkan secara berurutan. Indeks-z dari gambar sebelumnya secara permanen disetel ulang ke 0 dan elemen loop saat ini dibawa ke depan dengan mengatur indeks-z ke 1.
Itu saja. Penggeser paling sederhana dan terkecil di dunia sudah siap, andal, dan dasar seperti senapan serbu Kalashnikov. Sekarang seluruh dek berdetak dan elemen saat ini dari loop semu muncul kedepan. Semuanya berfungsi tanpa pihak ketiga dalam JavaScript murni.
Tambahkan efek
Rotor (begitu saya menyebutnya) terlalu sederhana dan saya ingin menambahkan beberapa efek transisi. Untuk melakukan ini, Anda sudah harus menggunakan pustaka yang tahu cara menganimasikan CSS dengan efek easing yang keren (ada 43 di antaranya di RevolveR).
Berikut daftarnya:
let launch = RR.browser;
RR.allowSlide = true;
var e = RR.sel('figure img')
let i = 0;
void setInterval(
() => {
if( e && RR.allowSlide ) {
RR.animate([ e[ i ] ], ['opacity:0:800:lienar'], () => {
e[ i ].style.zIndex = 0;
i++;
i = i === e.length ? 0 : i;
RR.animate([ e[ i ] ], ['opacity:.8:800:swingTo'], () => {
e[ i ].style.zIndex = 1;
});
});
}
},
3000);
Di sini, urutan panggilan balik diimplementasikan untuk menyelesaikan status animasi, yang dalam total waktu cocok selama jenis timer setInterval, dan kita mendapatkan transisi keren dengan fading dan flickering.
Semuanya baik-baik saja, tetapi kami juga akan menambahkan penundaan dengan membalik bendera saat penunjuk berada di atas panggung:
RR.event('figure img', 'mouseenter', () => {
RR.allowSlide = null;
RR.event('figure img', 'mouseleave', () => {
RR.allowSlide = true;
});
});
Rotor oleh RevolveR Labs beraksi
Lihat Rotor beraksi di sini .
Seperti yang Anda lihat, tidak banyak kode di sini, dan Anda dapat menerapkan efek yang lebih kompleks dan menarik. Tapi itu terserah kamu.