Javascriptoo – Belajar HTML, CSS Tutorial Desain Website

6 Contoh Praktis Membangun Paralaks Websites

6 Contoh Praktis Membangun Paralaks Websites – Saat ini, situs web dengan animasi gulir sangat populer. Inilah mengapa hari ini kami akan menunjukkan kepada Anda beberapa contoh praktis untuk membangunnya. Anda dapat menganggap artikel ini sebagai kumpulan elemen penyusun, yang dapat dicampur dan dicocokkan menjadi halaman web interaktif yang mengesankan.

Ide Dasar

Cara umum untuk membangun situs web ini adalah dengan menggunakan perpustakaan JavaScript. Beberapa pilihan populer adalah Scrollr, scrollMagic, Parallax.js, scrollReveal.js, dll. Hari ini, kami akan menggunakan Scrollr karena ini yang paling populer dan dapat digunakan di perangkat seluler.

Untuk menggunakan Scrollr, Anda hanya perlu mengunduh kode sumbernya dan membuat tautan ke sana dalam HTML. Setelah selesai, panggil skrollr.init();. Scrollr akan diaktifkan untuk semua elemen di halaman.

<script src="assets/skrollr.min.js"></script>

<script>
    skrollr.init();
</script>

Perpustakaannya sangat keren, Anda dapat menggunakannya untuk membuat berbagai animasi gulir. Silakan kunjungi situs web yang dapat kami bangun dengan :

Mau tahu cara membuatnya? Lanjut membaca!

Baca Juga : Membuat Single Page Aplikasi Tanpa Framework

Introduction to Scrollr

Setelah Anda memiliki pustaka Scrollr di halaman, Anda bisa menambahkan atribut data ke elemen yang ingin Anda animasikan saat Anda menggulir halaman. Ini adalah contoh paling dasar, yang menganimasikan div dari biru menjadi merah:

<div data-bottom-top="background-color: rgb(255,0,0);" 
data-center-center="background-color: rgb(0,0,255);">
</div>

Kami memiliki div sederhana dengan sepasang atribut. Properti pertama akan memberi tahu Scrollr kapan animasi akan dimulai dan properti kedua akan berakhir. Seperti yang Anda lihat, animasinya sendiri dilakukan melalui properti CSS (perhatikan bahwa Anda perlu menentukan warnanya sebagai rgb). Perpustakaan bertransisi dengan mulus dari satu ke yang lain.

Dengan menggunakan atribut data ini, Anda dapat membuat berbagai efek yang menarik. Berikut beberapa contoh praktis untuk menunjukkan kepada Anda apa yang dapat Anda lakukan.

1. Parallax Intro

Parallax mungkin adalah animasi scrolling paling populer yang pernah kita lihat baru-baru ini. Ini terdiri dari gambar tetap yang besar di seluruh latar belakang, dan kita hanya dapat melihat sebagian dari mereka berdasarkan jarak gulir.

Baca Juga : Membuat Sistem Pendaftaran Dengan PHP Dan Mysql

Selain itu, paralaks kami hanyalah gambar di div pembungkus, bertransisi pada kecepatan berbeda dan beberapa CSS cerdas.

2. Body Text

Di sini kami memiliki tiga paragraf sebaris, yang akan muncul satu demi satu. Kami telah melakukan ini dengan offset, yang memberi tahu perpustakaan untuk memulai animasi lebih awal dari biasanya.

3. Feature List

Daftar unggulan adalah tempat Anda menampilkan fitur produk. Ikon dan teks besar adalah suatu keharusan, tetapi Anda juga dapat menambahkan minat pada berbagai hal dengan animasi yang menarik. Dalam contoh kami, kami akan membuat fungsi muncul dari berbagai sisi layar.

4. About us

Contoh “Tentang Kami” kami terdiri dari dua avatar melingkar indah yang disejajarkan. Gambar di baris pertama diputar searah jarum jam, dan gambar di baris kedua dibalik secara horizontal.

Baca Juga : 10 Template Website Responsive Dan Gratis

5. Gallery

Kami telah menyiapkan animasi gulir yang indah untuk contoh galeri. Ini terdiri dari dua baris gambar. Baris pertama bergerak dari kanan ke kiri, dan baris kedua bergerak berlawanan arah. Animasi membutuhkan beberapa waktu untuk diselesaikan, dan karena kami tidak ingin galeri meninggalkan layar tanpa menyelesaikan transisinya, kami menjeda pengguliran untuk beberapa saat.

6. Footer

Untuk bagian footer, kami menggunakan template freebie dan hanya mengubah warnanya. Saat footer memasuki layar, lebar bilah pencarian internal akan bertambah.

Semoga Anda menyukai contoh dari javascriptoo! Anda dapat belajar banyak tentang Scrollr. Ini memiliki dokumen yang sangat rinci yang mencakup semua aspek perpustakaan.