Cara Membuat Background Parrallax dengan Materialize CSS

Menggunakan efek unik pada website sekarang ini adalah sesuatu yang bisa dibilang sangat diperlukan untuk memberikan kesan unik agar menarik perhatian orang yang mengunjunginya sehingga akan berpengaruh besar terhadap pengunjung yang merasa nyaman dan betah untuk berlama – lama membaca artikel atau konten yang ada, sisanya adalah tergantung isi konten dari website kalian, apakah menarik untuk dibaca atau tidak.

Hal yang sekarang sedang banyak di manfaatkan dalam perkembangan dunia web desain adalah jenis website parallax, website jenis ini sudah sangat banyak bermunculan dimulai dari sekitar awal 2015 sudah banyak website yang menggunakan konsep parallax. Untuk yang belum mengetahuinya, parallax adalah efek tiga dimensi antara background dan isi konten, ada yang menerapkan beberapa lapis background, ada juga yang hanya memiliki satu lapis background. Tujuan dari efek parallax sendiri adalah membuat website yang memiliki background gambar memiliki efek gerak semu pada background nya, dimana kecepatan scroll background bisa diperlambat dan dipercepat atau bahkan dibuat menjadi arah berlawanan dengan scroll. Semua itu dilakukan menggunakan javascript

Dari sekian banyak plugin yang menyediakan konsep parallax, saya memilik sebuah framework yang sangat powerful untuk membuat efek background parallax. Framework tersebut adalah framework Materialize CSS. Dimana framework ini berfokus pada tampilan website yang bersifat material design dengan berbagai warna dan efek yang sangat menyesuaikan dengan apa yang saya jelaskan pada artikel saya yang berjudul Apa Itu Material Design?

Berikut ini saya akan berikan contoh untuk cara membuat background parallax menggunakan materialize css.

Pertama kita hubungkan dulu plugin yang kita butuhkan

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">

<!—Compiled and minified Jquery -->
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
"></script>

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
          

 

Lalu kita buat struktur HTML seperti berikut

<div class="section">
    <div class="parallax-container">
        <div class="parallax"><img src="https://upload.wikimedia.org/wikipedia/commons/5/58/Sunset_2007-1.jpg"></div>
    
        <div class="content">
            <!-- isi konten kalian -->
        </div>
    </div>
</div>

 

Selanjutnya kita gunakan javascript init untuk mengaktifkan fungsi parallax

    $(document).ready(function(){
      $('.parallax').parallax();
    });

 

Untuk mengatur ketinggian konten parallax bisa menggunakan css seperti ini

.parallax-container {
      height:400px;
    }

 

Berikut ini saya sertakan juga demo untuk kalian lihat.

 

 

Baiklah teman-teman demikian artikel kali ini semoga bermanfaat

10 April 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat