Membuat Layout Website Parallax Dengan Materialize

Halo teman – teman selamat datang kembali di website tips dan trik Dumet School, berjumpa kembali dengan saya pada pembahasan seputar dunia website. Pada kesempatan kali ini saya akan memberikan tips tentang Membuat Layout Website Parallax Dengan Materialize, apa yang di maksud parallax dalam dunia website..??

Desain website paralax sekarang ini semakin populer di dunia website dan membawa pengalaman pengguna ke tingkat interaktif baru dalam online viewing. Pengunjung situs website paralaks telah mengambil alih sebagai batasan baru user experience atau yang biasa kita sebut UX. Di kesempatan kali ini kita akan Membuat Layout Website Parallax Dengan Materialize dimana pada framework materialize ini telah menyediakan dalam pembuatan website parallax. Langsung saja kita implementasikan, teman – teman siapkan text editornya dan file materialize nya. Kemudian pada index.html tambahkan script basic parallax nya di bawah ini

<div class="section white">
    <div class="row container">
        <h2 class="header">Home</h2>
        <p class="grey-text text-darken-3 lighten-3">Isi Text kontent</p>
        <img src="img/slide4.jpg">
    </div>
</div>
<div class="parallax-container">
    <div class="parallax"><img src="img/1.jpg"></div>
</div>

Hingga buat sebuah layout website parallax, teman – teman bisa lihat pada gambar script di bawah ini

Bisa teman – teman lihat pada gambar script di atas ini, saya membuat sebuah halaman home, gallery dan about dengan menggunakan script parallax basic materialize dan kemudian image saya menggunakan ukuran full width. Atau teman – teman bisa pakai image dengan ukuran 1690 x 1127 px, selanjutnya baru kita tambahkan script javascript nya

<script type="text/javascript">
 $(document).ready(function(){
 $('.parallax').parallax();
 });
 </script>

Letakkan tepat di bawah link materialize.min.js

Jika sudah save dan jalankan pada browsernya, maka jika di scroll membuat latar belakang bergerak lebih lambat dari latar depan. Konsep yang sama berlaku untuk desain situs paralaks di mana latar belakang situs bergerak pada kecepatan yang berbeda dengan sisa halaman lainnya untuk efek visual yang mengesankan yang memungkinkan untuk aplikasi kreatif yang tak terhitung jumlahnya untuk online storytelling. Dengan framework ini kita dapat membuat sebuah layout parallax dengan mudah, website parallax lebih mengarah pada website one page atau 1 halaman. Teman – teman bisa di kembangkan lagi dari latihan singkat kali ini. Sekian pada artikel ini tentang Membuat Layout Website Parallax Dengan Materialize kita berjumpa kembali pada artikel yang akan datang. Terimakasih dan sampai jumpa.

Semoga bermanfaat

The post Membuat Layout Website Parallax Dengan Materialize appeared first on Kursus Website Terbaik.