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
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
<header>
<img src="img/twd-logo-mini.png" alt="logo twd mini">
<h1><a href="http://www.tutorial-webdesign.com">Tutorial-WebDesign<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 tutorial yang bermanfaat untuk pembaca setia tutorial-webdesign.com</p>
<p><small><a href="http://www.tutorial-webdesign.com/membuat-landing-page-bergaya-flat-design">« 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 sebagian besar adalah hal-hal yang berhubungan dengan pembuatan website</p>
</div>
</section>
<section class="page three">
<div class="page-container">
<h2>Design<small> • Indonesia</small></h2>
<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>
<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>
</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), 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
$(".main").onepage_scroll({
sectionContainer: "section"
});
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.
/* 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;
}
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
wah mantap tutorialnya. mau tanya, agar tampilannya bisa responsive bagaimana ?
pelajari media query css, nanti tinggal tambahin css nya sedikit
Terimakasih, websitenya bagus. tutorialnya jelas. teruslah berkarya.
itu kan keatas dan ke bawah saja,,
bagaimana kalau bisa untuk kanan dan kiri juga,, jadi ada 4 navigasi dalam 1 page nya,, gmana yaa caranya? mungkin ada tambahan referensi plugin js yang bisa untuk 4 navigasi seperti yang saya tanya itu,,
thanx tutor nya,, ^^
kalo effect scrollnya ke kiri/kanan tp tetep fullscreen gimana modifikasnya?
javascriptnya bikin bingung kang T.T
Huaa….. mangstab (y)
klo di website nya iphone itu kan pas kita scroll ada muncul header baru yang nantinya posisi header baru itu fix.
nah cara bikin header yg baru muncul itu trus dibikin fixed gmn om?
Kalau ingin menambahkan footer hanya di bagian terakhir bagaimana ya?
ane juga nyari ini gan, tapi ane mau nambahin 1 halaman khusus buat footer.
tapi bingung cara nambahin halaman ke-4 itu gimana caranya
Mohon maaf, sepertinya ada kesalahan dengan parse kode html diatas
Oiya, salam kenal ya :)
salah dibagian mana?
Itu lho Min, tag html yang yang ada di SyntaxHighlighter
<header>
<img src="img/twd-logo-mini.png" alt="logo twd mini">
<h1><a href="http://www.tutorial-webdesign.com">Tutorial-WebDesign<small>.com</small></a></h1>
</header>
Nice tutor om TUT
ijin ambil master….dan sekali lagi matur Thank you… :D
saya mau bertanya kalau scroll nya itu di taruh di dekat title sebagai menu itu bagaimana ya caranya ?
terima kasih, dan saya tunggu jawabannya
terima kasih buat tutorialnya,
jadi makin semangat belajar web lg nih (y)
Om kalau kita tambah logonya jadi 3 gimana ya ? kan itu cuma 1 tapi 3x scrool, nah kalo gambarnya ada 3, 1 gambar perslide gimana ya ?
Dibikin aja beda-beda, tambahin kode nya lagi sesuaikan dengan kebutuhan
maaf om saya butuh sedikit tuntunan :( maklum, lagi blajar otodidak, ga ada yg ngajarin, karna rencananya abis ini mau kuliah ambil jurusan ini :D *malah curhat
saya dah buat 3 gambar beda, yg saya bingung, codenya yg diedit cuma di css apa ada di tempat lain juga ?
Kalau gambarnya ada 3 kemingkinan htmlnya jg harus dibuat untuk menampilkan 3 gambar. Atau bisa jg gambarnya dimasukin lewat css tentunya dgn nama div yg berbeda-beda. Silahkan dicoba2 ya
Owh, ya ya ngerti saya,. makasih bang.
Om, ini udah dicoba di mobile belum? hehe,
saya mau nyoba sendiri gak ada mobile nya,
Makasih :-)
itu emang gak dibuat untuk responsive, kalau mau responsive tambahin media query di css nya
luar biasa infonya gan , langsung gue bookmark website elu :P :D
Gan software yg biasa agan gunakan utk ngoding apa? ane biasa pke DW n NetBeans.
Sublime text
kok gag ada perbedaan???
kayak pindah halaman biasa aja???
Mau tanya, itu kan html, kalau saya akan menggunakan php, mana yg harus diubah ?
gak ada yang musti di ubah, karena PHP nanti disisipkan di HTML nya, hasilnya pun nanti HTML juga
min maaf kalo demoin nya tidak online tidak bisa ya ditampilin hasil demoannya? itu karna apa ya?
maaf newbie
maksih info tutorialnya
ijin pelajari dlu ya mas, ada tugas sruh bkin web .hedeh .. thx
masih bingung nih mass dengan scriptnya :(
wee, bagus
tutorial sederhana tapi keren.
Mantab ini tutorialnya masbro, seandainya diaplikasikan dalam format wordpress themes kira-kira apa saja langkah2nya mas?
cukup mempelajari struktur template wordpress saja, nanti selebihnya bisa sendiri
gan mw nyak gan,,efek turun berganti atau berganti otomatis tu letaknya di java scriptnya pa cssny gan?
Bisa js bisa css. Karena di css ada fitur transisi dan bisa animasi
stu ge gan bedanya javascript sama vbscript pa gan? maav gan bnyak nyak,
Pertanyaan orang-orang agak malas nih, padahal di google ada banyak.
Coba baca disini – http://id.answers.yahoo.com/question/index?qid=20081219023007AAf52Dt
atau dilebih banyak disini – https://www.google.com/search?q=perbedaan+javascript+dan+vbscript
mas kalau membuat leanding page gaya geser kiri atau kanan , itu namanya apa ya mas, keren banget tutorialnya
Horizontal Slide mungkin :D
salah satu website yang paling sering saya kunjungi adalah website anda, tutorialnya keren dan mudah dimengerti.
Tutorialnya keren :) Jadi nggak sabar pengen utak-atik web lagi :)
Yang sekarang bikin penasaran, cara bikin flat design landing page tapi yang 4 arah gimana caranya, ya? Kayak web-nya RCA Victor: http://www.rcavictor.co.uk/
Ditunggu tutorialnya, ya, min….
Trims :)
kalo di tutorial kan ganti pagenya itu dengan radio buttin yang di samping kanan kalau misal kita masukan ke navbar itu gimana ya ?
Terima Kasih Great Tutor
g’O’O’d job!!
awesome. bisa jadi Inspirasi;. nice tuts oom
thank gan tutorialnya sory gue masih newbie :v
yoi ganti tamplet lagi ah, oya mas ini hasil saya belajar di twd cek http://puspusid.tk itu tample pertama
http://puspusid.tk/tample2 ini yg kedua blm jd :D
mampir ya tinggalin jejak wkwk
mas, kalau ngedit scrollnya di taruh diatas (dijadikan menu) bagaimana mana caranya?
Sangat bermafaat sekali, bisa menjadi tutorial referensi untuk
web desain Indonesia
Thank’s to share…
Salam MDesain.com
yes….masih bingung
[…] desain web portfolio untuk seorang kartunis, ilustrator, atau seniman. Jika sebelumnya kita pernah membuat website one page bergaya flat design sekarang kita kembali akan membuat website one page bahkan bisa disebut hanya landing […]
saya sangat tertarik dengan desain web satu halaman ini.
yang mau saya tanyakan, agar scroll nya berada diatas ( header ) berupa menu. jdi setiap klik menu A, langsung scroll ke menu /halaman yang d tuju itu bagaimana yaa?
ditambahin kode sebelah mana nya? saya coba utak atik, malah jdi berantakan. hehehe
kalo bisa, mohon share nya :)
terimakasih
mau tanya ….
apa bisa ya itu tool tip yang sebelah kanan untuk pergantian slide diganti menjadi menu diatas ……
terima kasih..
maksudnya tool tip yang ada di sebelah kanan diganti menjadi sebuah tombol menu yang berada di headernya
bisa saja, tapi tidak akan dibahas di artikel ini, mungkin di tutorial lain nya nanti akan dibuat seperti itu
Seharusnya bisa :) tapi kita disini tidak akan membahas itu
mas maaf tooltip itu jodingannya ada di js apa css ya? saya mau nambah tooltip. :”) terima kasih
Mas, bagaimana kalau mau dibuat responsive website? Apakah yang harus diubah/ditambah? Masih belum jelas untuk media query di CSS. Atau kalau boleh usul, dibuat tutorial part 2 yang responsive design. Terima kasih atas jawabannya,
wah mantab nih tutorialnya hehe thanks! :D
terima kasih.. ini sangat membantu saya.
Thanks man, this helpful. can you share again, for scrolling animation other? I will wait.
tolong bantuannya ni. gimana membuat scroll nya dengan menu…
bukan dengan button sprti itu.
saya mau membuat ketika menu di header di klik maka page berubah dengan gaya sprti ini…
tlg bls min ke email juga ya,,,,
Gan,, ane udah berhasil implementasi script nya ke web ane,, tapi SSL nya kok jadi ada logo peringatan (tanda seru) ya…
Apa karna plugin jquery yg untuk scroll nya ? ^_^
Tutorial yang bagus gan….
owh iya gan, kalau mau buat tampilkan dengan slide otomatis (muter sendiri, dengan jeda waktu beberapa detik) gmn yah??
terimakasih
Mantap bro,, ini yang ane cari :D
kalau web ini asyst.co.id itu buat pake template atau bisa pake contoh script ini ya gan lagi berlajar buat web gan mohon pencerahan
Untung saya ketemu tutorial ini. Jadi bisa langsung ke TKP. Mantab..
Mas gimana caranya biar kita bikin menu bar diatas headernya?
mas, cara donlod di githubnya bagaimana
Tingal klik tombol Clone & Download yang berwarna hijau di bagian kanan
biar AMP gimana ea kak? solusinya kak
mas ini kok headernya warna backgroundnya g bisa diganti sihh warnanya, sudah saya ganti di cssnya tapi tetap g mau ganti
ganti css di bagian
header{}di cssMin mau tanya, script itu kan class nya “page one” tapi kenapa di css nya cuma dipanggil “one” ya?
berati yang di panggil class “page” dan class “one” gan
tutor nya sangat bermanfaat min, saya nerapin ini jadi buat web nya ga monoton itu2 mulu. sukses terus twd.com
Tutorialnya sangat menarik. Apakah bisa diterapkan untuk web saya. Kalau bisa bisa minta advisenya. Thanks.
wah bagus nih rekomended, sayang dah gak aktif ya ?
untuk pidah fokus disini kan pake list ya mas, gimana kalo saya ingin menngunakan link. apa kah itu bisa ? terus apa yg musti di rubah ?
mas, kalo mau diaplikasikan di wordpress gmn caranya?
soalnya ini template seperti ini yang dulu saya cari”
thx
Kamu harus belajar WordPress Codex untuk menjadikan template tersebut menjadi sebuah theme WordPress
top markotop
permisi mau nanya, itu scroll nya kan dengan effek, bagaimana jika ingin mengunakan scroll bar biasa , tapi tetap ada scroll effek nya juga
oh iya satu lagi, inikan halamanya ga bisa di zoom in zoom out, bagaimana cara supaya agar bisa zoom in & out