Membuat Layout Website Parallax Dengan Materialize

Halo teman – teman selamat datang kembali di situs tips dan trik Source Code Aplikasi, berjumpa kembali dengan saya di pembahasan seputar dunia situs. Di kesempatan kali ini saya akan memberikan tips mengenai Membuat Layout Website Parallax Dengan Materialize, apa yang di maksud parallax pada dunia situs..??

Desain situs paralax kini ini semakin populer di dunia situs dan membawa pengalaman pengguna ke tingkat interaktif baru pada online viewing. Pengunjung situs situs paralaks telah mengambil alih selaku batasan baru user experience atau yang biasanya kita sebut UX. Di kesempatan kali ini kita akan Membuat Layout Website Parallax Dengan Materialize dimana di framework materialize ini telah menyediakan pada penyusunan situs parallax. Seketika saja kita implementasikan, teman – teman siapkan text editornya dan file materialize nya. Kemudian di 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 bikin sebuah layout situs parallax, teman – teman dapat lihat di gambar script di bawah ini

Dapat teman – teman lihat di gambar script di atas ini, saya merancang sebuah halaman home, gallery dan about dengan menggunakan script parallax basic materialize dan kemudian image saya menggunakan ukuran full width. Atau teman – teman dapat gunakan image dengan ukuran 1690 x 1127 px, berikutnya baru kita tambahkan script javascript nya

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

Letakkan tepat di bawah link materialize.min.js

Sekiranya telah save dan jalankan di browsernya, karenanya kalau di scroll merancang latar belakang bergerak lebih lambat dari latar depan. Konsep yang sama berlaku bagi desain situs paralaks di mana latar belakang situs bergerak di kecepatan yang berbeda dengan sisa halaman lainnya bagi efek visual yang mengesankan yang memungkinkan bagi program kreatif yang tak terhitung jumlahnya bagi online storytelling. Dengan framework ini kita dapat merancang sebuah layout parallax dengan gampang, situs parallax lebih mengarah di situs one page atau 1 halaman. Teman – teman dapat di kembangkan lagi dari latihan singkat kali ini. Sekianlah di artikel ini mengenai Membuat Layout Website Parallax Dengan Materialize kita berjumpa kembali di artikel yang akan datang. Terimakasih dan hingga jumpa.

Semoga bermanfaat 🙂

 

Sumber https://kursuswebsite.org