Selamat Datang

Membuat Website Satu Halaman Bergaya Flat Design Dengan Efek Scroll

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

	
        
        <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">&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 sebagian 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 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 RighteousVoltaire 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

	$(&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 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





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

74 thoughts on “Membuat Website Satu Halaman Bergaya Flat Design Dengan Efek Scroll

  1. milanos says:

    wah mantap tutorialnya. mau tanya, agar tampilannya bisa responsive bagaimana ?

  2. KomputerKita says:

    Terimakasih, websitenya bagus. tutorialnya jelas. teruslah berkarya.

  3. hanzputro says:

    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,, ^^

  4. Padangilalang says:

    kalo effect scrollnya ke kiri/kanan tp tetep fullscreen gimana modifikasnya?

  5. Arc says:

    javascriptnya bikin bingung kang T.T

  6. Qy says:

    Huaa….. mangstab (y)

  7. arhakim says:

    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?

  8. odlanier says:

    Kalau ingin menambahkan footer hanya di bagian terakhir bagaimana ya?

    • Rakka Wibisono says:

      ane juga nyari ini gan, tapi ane mau nambahin 1 halaman khusus buat footer.
      tapi bingung cara nambahin halaman ke-4 itu gimana caranya

  9. Rina says:

    Mohon maaf, sepertinya ada kesalahan dengan parse kode html diatas
    Oiya, salam kenal ya :)

  10. Dodi says:

    Nice tutor om TUT

  11. zaenur says:

    ijin ambil master….dan sekali lagi matur Thank you… :D

  12. saya mau bertanya kalau scroll nya itu di taruh di dekat title sebagai menu itu bagaimana ya caranya ?
    terima kasih, dan saya tunggu jawabannya

  13. Charista says:

    terima kasih buat tutorialnya,
    jadi makin semangat belajar web lg nih (y)

  14. Allen says:

    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

      • Allen says:

        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 ?

  15. Agus Salim says:

    Om, ini udah dicoba di mobile belum? hehe,

    saya mau nyoba sendiri gak ada mobile nya,
    Makasih :-)

  16. khoirul Anam says:

    luar biasa infonya gan , langsung gue bookmark website elu :P :D

  17. Test says:

    Gan software yg biasa agan gunakan utk ngoding apa? ane biasa pke DW n NetBeans.

  18. bejo says:

    kok gag ada perbedaan???
    kayak pindah halaman biasa aja???

  19. Robi says:

    Mau tanya, itu kan html, kalau saya akan menggunakan php, mana yg harus diubah ?

  20. bay says:

    min maaf kalo demoin nya tidak online tidak bisa ya ditampilin hasil demoannya? itu karna apa ya?
    maaf newbie

  21. dimas says:

    maksih info tutorialnya

  22. wisnu says:

    ijin pelajari dlu ya mas, ada tugas sruh bkin web .hedeh .. thx

  23. masih bingung nih mass dengan scriptnya :(

  24. Muhammad Yusup Hamdani says:

    tutorial sederhana tapi keren.

  25. setiawanado says:

    Mantab ini tutorialnya masbro, seandainya diaplikasikan dalam format wordpress themes kira-kira apa saja langkah2nya mas?

  26. rambe says:

    gan mw nyak gan,,efek turun berganti atau berganti otomatis tu letaknya di java scriptnya pa cssny gan?

  27. rambe says:

    stu ge gan bedanya javascript sama vbscript pa gan? maav gan bnyak nyak,

  28. ndemo says:

    mas kalau membuat leanding page gaya geser kiri atau kanan , itu namanya apa ya mas, keren banget tutorialnya

  29. novi says:

    salah satu website yang paling sering saya kunjungi adalah website anda, tutorialnya keren dan mudah dimengerti.

  30. Yohanes Pasaribu says:

    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 :)

  31. ilham says:

    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

  32. Roy says:

    g’O’O’d job!!

  33. Kang Fand says:

    awesome. bisa jadi Inspirasi;. nice tuts oom

  34. lucky says:

    thank gan tutorialnya sory gue masih newbie :v

  35. renaldgn says:

    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

  36. adimien says:

    mas, kalau ngedit scrollnya di taruh diatas (dijadikan menu) bagaimana mana caranya?

  37. Sangat bermafaat sekali, bisa menjadi tutorial referensi untuk
    web desain Indonesia

    Thank’s to share…
    Salam MDesain.com

  38. KTA Niaga says:

    yes….masih bingung

  39. […] 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 […]

  40. Erik says:

    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

  41. goro says:

    mau tanya ….

    apa bisa ya itu tool tip yang sebelah kanan untuk pergantian slide diganti menjadi menu diatas ……

    terima kasih..

  42. toki says:

    mas maaf tooltip itu jodingannya ada di js apa css ya? saya mau nambah tooltip. :”) terima kasih

  43. nugnugnug says:

    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,

  44. tama says:

    wah mantab nih tutorialnya hehe thanks! :D

  45. Zuhra says:

    terima kasih.. ini sangat membantu saya.

  46. Bryan Satria says:

    Thanks man, this helpful. can you share again, for scrolling animation other? I will wait.

  47. andy says:

    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,,,,

  48. 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 ? ^_^

  49. Edi says:

    Tutorial yang bagus gan….
    owh iya gan, kalau mau buat tampilkan dengan slide otomatis (muter sendiri, dengan jeda waktu beberapa detik) gmn yah??

    terimakasih

  50. Reksa Rangga says:

    Mantap bro,, ini yang ane cari :D

  51. agam says:

    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

  52. Fiforlif says:

    Untung saya ketemu tutorial ini. Jadi bisa langsung ke TKP. Mantab..

  53. Nicholas says:

    Mas gimana caranya biar kita bikin menu bar diatas headernya?

  54. deny julistia says:

    mas, cara donlod di githubnya bagaimana

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development