Cara Membuat Slider Split-Screen Dengan JavaScript

() translation by (you can also view the original English article)

Dalam tutorial video hari ini, saya akan menunjukkan cara membuat elemen slider "split-screen" (atau UI, apa pun yang Anda inginkan untuk menyebutnya) dengan menggunakan JavaScript. Inspirasinya berasal dari halaman di situs Corsair; mari kita lihat bagaimana kita bisa membangun satu untuk proyek kita sendiri.

Apa yang Akan Kita Bangun

Mari kita lihat demo dari apa yang sedang kita bangun. Lihat proyek di CodePen, atau ambil file sumber dari GitHub.

Perhatikan Screencast

1. Bangun Panel Anda

Jadi bagaimana ini dilakukan? Mulailah dengan membangun dua panel terpisah dalam markup HTML Anda. Saya telah menggunakan dua elemen div dengan kelas panel. Yang pertama memiliki kelas tambahan bottom, yang lain kelas tambahan top. Masing-masing berisi div lain untuk membungkus isinya.

<div class="splitview">
    <div class="panel bottom">
        <div class="content">
        
        </div>
    </div>   
    <div class="panel top">
        <div class="content">
        
        </div>
    </div>    
</div>        

Letakkan konten apa pun yang Anda suka (gambar, judul, dsb.) di dalam div content.

Ketika selesai, tambahkan div baru, sebelum menutup tag splitview berfungsi sebagai handle.

1	<div class="handle"></div>

2. Tambahkan Beberapa Style untuk Menumpuk Panel

Style penting pertama akan menumpuk dua panel di atas satu sama lain, memastikan bahwa mereka mengalir.

/* Panels. */
.splitview {
    position: relative;
    width: 100%;
    min-height: 45vw;
    overflow: hidden;
}

.panel {
    position: absolute;
    width: 100vw;
    min-height: 45vw;
    overflow: hidden;
}

Gaya masing-masing panel- top dan bottom -berbeda, seperti memberi mereka background-color yang berbeda, dan beri style konten di dalamnya. Satu hal yang perlu diperhatikan adalah index-z masing-masing, untuk memastikannya menumpuk dengan urutan yang benar.

.bottom {
    background-color: rgb(44, 44, 44);
    z-index: 1;
}

.top {
    background-color: rgb(77, 69, 173);
    z-index: 2;
}

3. Terapkan Mask Sederhana

Kami sekarang memiliki panel top kami yang benar-benar menutupi yang ada di bawahnya, jadi mari bereksperimen dengan mengurangi lebarnya:

.top {
    background-color: rgb(77, 69, 173);
    z-index: 2;
    width: 50vw;
}

Seharusnya Anda mendapati hasil seperti ini, dengan panel top hanya mencapai bagian tengah (50vw) halaman:

4. Beralih ke JavaScript

Sekarang setelah kita menyelesaikan masalah dengan CSS, mari kita beralih ke JavaScript dan melihat apakah kita dapat menghidupkan efek sliding mask ini. Kami akan mulai dengan meminta browser untuk menjalankan sebuah fungsi, namun hanya sekali ketika DOM telah dimuat:

1	document.addEventListener('DOMContentLoaded', function() {
2
3	});

Sisa kode kita akan masuk ke dalam fungsi ini, di antara kurung kurawal.

Selanjutnya kita akan menetapkan beberapa variabel dengan mengambil elemen parent, panel top (yaitu satu-satunya yang akan kita ubah), dan elemen handle.

1	var parent = document.querySelector('.splitview'),
2	topPanel = parent.querySelector('.top'),
3	handle = parent.querySelector('.handle'),

5. Membangun Handle

Sebelum melangkah lebih jauh, mari beri style pada handle.

/* Handle. */
.handle {
    height: 100%;
    position: absolute;
    display: block;
    background-color: rgb(253, 171, 0);
    width: 5px;
    top: 0;
    left: 50%;
    z-index: 3;
}

Ini adalah bar kuning seluas 5px, menjalankan ketinggian wadah dan ditempatkan di tengah area. Ini memiliki z-index dari 3 untuk memastikannya berada di atas.

Buat Berpindah

Kami ingin mengambil koordinat x dari kursor mouse setiap kali kita memindahkannya ke dalam area. Kami kemudian ingin memindahkan handle dan mengatur lebar panel top sesuai dengan koordinat tersebut.

Kita mulai dengan event listener pada elemen parent, dan kemudian mengatur properti style left dari handle yang sama dengan nilai event.clientX .

1	parent.addEventListener('mousemove', function(event) {
2	// Move the handle.
3	handle.style.left = event.clientX + 'px';
4	});

Yang menangani handle kami yang bergerak, sekarang mari kita ubah ukuran panelnya, buat yagn sama dengan event.clientX .

parent.addEventListener('mousemove', function(event) {
        // Move the handle.
        handle.style.left = event.clientX + 'px';

        // Adjust the top panel width.
        topPanel.style.width = event.clientX + 'px';
});

Selesai!

Akhirnya mencapai akhir; dengan CSS dan JavaScript yang relatif mudah, kami telah menciptakan efek sliding mask split-screen yang brilian. Untuk mengambil lebih jauh, seperti yang saya lakukan di video, kita bisa membelokkan handle juga - lihat demo di CodePen untuk melihat bagaimana terlihat!