Membuat Website Satu Halaman Bergaya Flat Design Dengan Efek ScrollTWD 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 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 dibuatInspirasiApa 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.HTMLKita mulai dengan membuat struktur HTML untuk layout website yang akan dibuat Tutorial-WebDesign.com Tutorial TWD fokus pada untuk terus memberikan tutorial yang bermanfaat untuk pembaca setia tutorial-webdesign.com back to tutorial | Demo 2 Bounce Effect Web Konten di website tutorial-webdesign.com sebagian besar adalah hal-hal yang berhubungan dengan pembuatan website Design Indonesia 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 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. 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 websitePada bagian head dan /head kita sisipkan Jquery (javascript framework), OnePageScroll.js(jquery plugin), dan font Righteous & Voltaire yang kita embed dari Google Web FontJavascipt(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 tidakOpsi-opsi lainnya bisa dilihat secara lengkap di halaman github OnePageScroll.jsCSSAgar 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;}