Landing Page

Membuat Website Satu Halaman Bergaya Flat Design Dengan Efek Scroll
TWD Editorial URL:http://www.tutorial-webdesign.com/wQXCI
October 14th, 2013 Tutorial, Web Design 66 Comments
Membuat website landing page dengan scroll perhalaman dengan menggunakan jquery
akan kita bahas pada tutorial kali ini.
Model website yang akan dibuat ini bisa digunakan untuk website company profile,
tinggal disesuaikan dengan kebutuhan, Desain website di demo ini mungkin akan k
elihatan seperti website dengan tema flat design, karena warna yang digunakan me
mang mirip dengan warna-warna yang biasa digunakan dalam flat design, warna yang
digunakan di demo yang akan kita buat diambil dari warna-warna yang ada di logo
tutorial-webdesign.com
Tampilan yang akan dibuat
Inspirasi
Apa yang akan kita buat ini sebenarnya terinspirasi dari website iPhone 5s dan i
Phone 5c nya Apple, dimana pada website tesebut setiap kita melakukan scroll mak
a halaman akan berpindah halaman dengan mendeteksi mouse ketika melakukan scroll
. Dan efek itulah yang akan coba kita buat.
HTML
Kita mulai dengan membuat struktur HTML untuk layout website yang akan dibuat
<header>
<img src="img/twd-logo-mini.png" alt="logo twd mini">
<h1><a href="http://www.tutorial-webdesign.com">Tutorial-WebDesi
gn<small>.com</small></a></h1>
</header>
<div class="main">
<section class="page one">
<div class="page-container">
<h2>Tutorial</h2>
<p>TWD fokus pada untuk terus memberikan tutoria
l yang bermanfaat untuk pembaca setia tutorial-webdesign.com</p>
<p><small><a href="http://www.tutorial-webdesign
.com/membuat-landing-page-bergaya-flat-design">&laquo; back to tutorial</a> | <a
href="index2.html">Demo 2 Bounce Effect</a></small></p>
</div>
</section>
<section class="page two">
<div class="page-container">
<h2>Web</h2>
<p>Konten di website tutorial-webdesign.com seba
gian besar adalah hal-hal yang berhubungan dengan pembuatan website</p>
</div>
</section>
<section class="page three">
<div class="page-container">
<h2>Design<small> &bull; Indonesia</small></h2>
<p>Dunia desain juga menjadi bidang yang banyak
dibawas di tutorial-webdesign.com, bukan hanya desain web, namun juga hal-hal la
in yang berhubungan dengan dunia desain grafis</p>
<p>Untuk itu kami mengundang anda yang bergerak
di dunia web design & development ataupun dunia desain grafis untuk ikut menyumb
angkan ilmu di tutorial-webdesign.com dengan menjadi penulis.</p>
</div>
</section>

</div>
Kalau kita lihat tidak ada yang spesial dari markup tersebut, disitu kita hanya
membuat header dan tiga buat section yang nanti akan berfungsi sebagai halaman,
jadi ada 3 halaman.
Header website
Pada bagian head dan /head kita sisipkan Jquery (javascript framework), OnePageS
croll.js(jquery plugin), dan font Righteous & Voltaire yang kita embed dari Goog
le Web Font
Javascipt(Jquery)
karena kita menggunakan jquery one page scroll sebagai plugin untuk memudahkan k
ita membuat efek layout berubah perhalaman ketika dilakukan scroll. Maka pada ba
gian akhir kode html kita sisipkan kode berikut ini
$(&quot;.main&quot;).onepage_scroll({
sectionContainer: &quot;section&quot;
});
Disitu terlihat jelas kalau kita menentukan tag section yang ada di class .main
yang akan dijadikan halaman-halaman websitenya.
selain opsi sectionContainer, masih ada opsi lain seperti:
easing untuk menentukan efek slidenya,
animationTime untuk waktu animasinya,
pagination untuk menampilkan nomor halaman atau tidak
Opsi-opsi lainnya bisa dilihat secara lengkap di halaman github OnePageScroll.js
CSS
Agar tampilan halaman terlihat rapih, kita percantik dengan CSS, disini sengaja
kita buat tiga buah section agar mudah untuk anda rubah-rubah sesuai kebutuhan s
etiap halamannya.
/* Header */
header{
background: #5b264e;
padding: 10px 20px;
margin-bottom: 0;
position: relative;
z-index: 10;
overflow: hidden;
}
header a{
color: #dddddd;
text-decoration: none;
}
header img{
float: left;
}
header h1{
margin-top:20px;
margin-left:80px;
font-family: 'Righteous', cursive;
}
/* Content */
.page{
background: url(../img/twd-logo.png) right top no-repeat;
}
.one{
background-color: #ae6c66;
}
.one .page-container{
position: absolute;
bottom: 100px;
margin-left: -400px;

left: 50%;
margin-bottom: 150px;
max-width: 650px;
}
.one .page-container h2{
font-size: 4em;
}
.one .page-container p{
padding: 20px 0;
line-height: 1.5em;
}
.two{
background-color: #b69877;
}
.two .page-container{
position: absolute;
bottom: 100px;
margin-left: -400px;
left: 50%;
margin-bottom: 150px;
max-width: 650px;
}
.two .page-container h2{
font-size: 4em;
}
.two .page-container p{
padding: 20px 0;
line-height: 1.5em;
}
.three{
background-color: #036564;
}
.three .page-container{
position: absolute;
bottom: 0px;
margin-left: -400px;
left: 50%;
margin-bottom: 150px;
max-width: 650px;
}
.three .page-container h2{
font-size: 4em;
}
.three .page-container p{
padding: 20px 0;
line-height: 1.5em;
}