Cara Membuat Background Parrallax dengan Materialize CSS

10/04/2017    Maykhel David    1538     Website

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

Web Design, Tips dan Trik

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More