Membuat tampilan menarik adalah menjadi sebuah tantangan, karena dengan membuat website sedemikian menarik akan mempengaruhi pengunjung untuk betah ataupun percaya atas kredibel website kita. Jadi jangan heran jika kalian mempunyai website dengan tampilan biasa-biasa saja akan membuat pengunjung bosan dan pindah ke website lain, padahal mungkin hal yang mereka cari sebenarnya ada pada konten website kita. Maka dari itu dibutuhkan kemampuan mendesain yang kuat untuk mengatasi ini semua.
Hal yang sedang marak di dunia web design adalah yang namanya website parallax. Apa itu website parallax ?. Website parallax adalah sebuah website dengan tampilan yang memanipulasi pandangan ketika melihatnya, karena pada saat kita scroll website parallax tersebut seakan-akan ada gambar yang tenggelam. Ini adalah ilusi optik semata. Sesuai dengan pembahasan kali ini, kita akan mencoba membuat website parallax dengan Materialize.
Materialize ini adalah sebuah framework CSS yang memudahkan kalian membuat tampilan website dengan fitur menarik yang ditawarkan. Salah satu fiturnya adalah website parallax. Pada dokumentasi materialize css sudah menyediakan bahan untuk kalian gali mengenai parallax. Untuk membuatnya kalian bisa mengunjungi website materialize atau bisa juga salin kode dibawah ini.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Parallax Template - Materialize</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/css/materialize.min.css">
<style>
/* Custom Stylesheet */
/**
* Use this file to override Materialize files so you can update
* the core Materialize files in the future
*
* Made By MaterializeCSS.com
*/
nav ul a,
nav .brand-logo {
color: #444;
}
p {
line-height: 2rem;
}
.button-collapse {
color: #26a69a;
}
.parallax-container {
min-height: 380px;
line-height: 0;
height: auto;
color: rgba(255,255,255,.9);
}
.parallax-container .section {
width: 100%;
}
@media only screen and (max-width : 992px) {
.parallax-container .section {
position: absolute;
top: 40%;
}
#index-banner .section {
top: 10%;
}
}
@media only screen and (max-width : 600px) {
#index-banner .section {
top: 0;
}
}
.icon-block {
padding: 0 15px;
}
.icon-block .material-icons {
font-size: inherit;
}
footer.page-footer {
margin: 0;
}
</style>
<body>
<nav class="white" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Logo</a>
<ul class="right hide-on-med-and-down">
<li><a href="#">Navbar Link</a></li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a href="#">Navbar Link</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
<div id="index-banner" class="parallax-container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<h1 class="header center teal-text text-lighten-2">Parallax Template</h1>
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
<div class="row center">
<a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light teal lighten-1">Get Started</a>
</div>
<br><br>
</div>
</div>
<div class="parallax"><img src="background1.jpg" alt="Unsplashed background img 1"></div>
</div>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">Speeds up development</h5>
<p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">group</i></h2>
<h5 class="center">User Experience Focused</h5>
<p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
</div>
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">settings</i></h2>
<h5 class="center">Easy to work with</h5>
<p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
</div>
</div>
</div>
</div>
</div>
<div class="parallax-container valign-wrapper">
<div class="section no-pad-bot">
<div class="container">
<div class="row center">
<h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
</div>
</div>
</div>
<div class="parallax"><img src="background2.jpg" alt="Unsplashed background img 2"></div>
</div>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js"></script>
<script>
(function($){
$(function(){
$('.button-collapse').sideNav();
$('.parallax').parallax();
}); // end of document ready
})(jQuery); // end of jQuery name space
</script>
</body>
</html>
setelah disimpan dengan format HTML, kalian bisa lihat hasilnya seperti ini.
saat discroll maka hasilnya akan seperti ini.
Catatan untuk gambar pada contoh diatas, kalian bisa menggunakan gambar bebas ya, mudah bukan ?
sekian pembahasan mengenai cara membuat website parallax dengan Materialize. Semoga bermanfaat.