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 kelihatan seperti website dengan tema flat design, karena warna yang digunakan memang 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
one page scroll
Tampilan yang akan dibuat
Inspirasi
Apa yang akan kita buat ini sebenarnya terinspirasi dari website iPhone 5s dan iPhone 5c nya Apple, dimana pada website tesebut setiap kita melakukan scroll maka 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
view sourceprint?
1<header>
2        <img src="img/twd-logo-mini.png" alt="logo twd mini">
3        <h1><a href="http://www.tutorial-webdesign.com">Tutorial-WebDesign<small>.com</small></a></h1>
4</header>
5<div class="main">
6         
7        <section class="page one">
8                <div class="page-container">
9                        <h2>Tutorial</h2>
10                        <p>TWD fokus pada untuk terus memberikan tutorial yang bermanfaat untuk pembaca setia tutorial-webdesign.com</p>
11                        <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>
12                </div>
13        </section>
14         
15        <section class="page two">
16                <div class="page-container">
17                        <h2>Web</h2>
18                        <p>Konten di website tutorial-webdesign.com sebagian besar adalah hal-hal yang berhubungan dengan pembuatan website</p>
19                </div>
20        </section>
21         
22        <section class="page three">
23                <div class="page-container">
24                        <h2>Design<small> &bull; Indonesia</small></h2>
25                        <p>Dunia desain juga menjadi bidang yang banyak dibawas di tutorial-webdesign.com, bukan hanya desain web, namun juga hal-hal lain yang berhubungan dengan dunia desain grafis</p>
26                        <p>Untuk itu kami mengundang anda yang bergerak di dunia web design & development ataupun dunia desain grafis untuk ikut menyumbangkan ilmu di tutorial-webdesign.com dengan menjadi penulis.</p>
27                </div>
28        </section>
29 
30</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), OnePageScroll.js(jquery plugin), dan font Righteous & Voltaire yang kita embed dari Google Web Font

Javascipt(Jquery)

karena kita menggunakan jquery one page scroll sebagai plugin untuk memudahkan kita membuat efek layout berubah perhalaman ketika dilakukan scroll. Maka pada bagian akhir kode html kita sisipkan kode berikut ini
view sourceprint?
1$(&quot;.main&quot;).onepage_scroll({
2    sectionContainer: &quot;section&quot;
3});
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 setiap halamannya.
view sourceprint?
1/* Header */
2header{
3    background: #5b264e;
4    padding: 10px 20px;
5    margin-bottom: 0;
6    position: relative;
7    z-index: 10;
8    overflow: hidden;
9}
10header a{
11    color: #dddddd;
12    text-decoration: none;
13}
14header img{
15    float: left;
16}
17header h1{
18    margin-top:20px;
19    margin-left:80px;
20    font-family: 'Righteous', cursive;
21}
22 
23/* Content */
24 
25.page{
26    background: url(../img/twd-logo.png) right top no-repeat;
27}
28.one{
29    background-color: #ae6c66;
30}
31    .one .page-container{
32        position: absolute;
33        bottom: 100px;
34        margin-left: -400px;
35        left: 50%;
36        margin-bottom: 150px;
37        max-width: 650px;
38    }
39        .one .page-container h2{
40            font-size: 4em;
41        }
42        .one .page-container p{
43            padding: 20px 0;
44            line-height: 1.5em;
45        }
46 
47.two{
48    background-color: #b69877;
49}
50    .two .page-container{
51        position: absolute;
52        bottom: 100px;
53        margin-left: -400px;
54        left: 50%;
55        margin-bottom: 150px;
56        max-width: 650px;
57    }
58        .two .page-container h2{
59            font-size: 4em;
60        }
61        .two .page-container p{
62            padding: 20px 0;
63            line-height: 1.5em;
64        }
65 
66.three{
67    background-color: #036564;
68}
69    .three .page-container{
70        position: absolute;
71        bottom: 0px;
72        margin-left: -400px;
73        left: 50%;
74        margin-bottom: 150px;
75        max-width: 650px;
76    }
77        .three .page-container h2{
78            font-size: 4em;
79        }
80        .three .page-container p{
81            padding: 20px 0;
82            line-height: 1.5em;
83        }
Demo & Download Script
Jika masih bingung bagaimana menerapkannya, silahkan lihat demo berikut, dan download kode untuk melihat script lebih lengkap.
DEMO 1 | DEMO 2 (Bounce Effect) | DOWNLOAD
Sekian
Oke sekian tutorial kali ini, Salam Web Design Indonesia