Satu Halaman Website Statis dengan Efek Sliding
Tabel Konten
Setelah sukses mengeset ukuran elemen berdasarkan ukuran layar, sekarang adalah saatnya untuk menciptakan efek smooth scrolling pada halaman. Saya menggunakan plugin jQuery scrollTo untuk mempermudah pengerjaan. Ya, itu benar, karena cukup dengan plugin tersebut, menciptakan efek smooth scrolling dapat dilakukan hanya dengan menuliskannya seperti ini:
$('a').click(function() {
$('html, body').scrollTo($(this).attr('href'), 1000);
return false;
});
HTML
Buat sebuah berkas HTML dimana jQuery, jQuery scrollTo dan CSS eksternal telah disertakan di dalamnya:
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Demo</title>
<link rel='stylesheet' href='style.css'>
<script src='jquery-1.7.1.min.js'></script>
<script src='scrollTo.js'></script>
<script>
$(function() {
// Pekerjaan kita di sini...
});
</script>
</head>
<body>
<!-- halaman -->
<div id='wrap'>
<div class='box' id='home'>
<h3>Home</h3>
</div>
<div class='box' id='contact'>
<h3>Contact</h3>
</div>
<div class='box' id='fun'>
<h3>For Fun</h3>
</div>
<div class='box' id='about'>
<h3>About</h3>
</div>
<div class='box' id='website'>
<h3>Website</h3>
</div>
<div class='box' id='skill'>
<h3>Skills</h3>
</div>
</div>
<!-- navigasi -->
<ul id='nav'>
<li><a class='active' href='#home'>Home</a></li>
<li><a href='#website'>Website</a></li>
<li><a href='#fun'>For Fun</a></li>
<li><a href='#about'>About</a></li>
<li><a href='#skill'>Skills</a></li>
<li><a href='#contact'>Contact</a></li>
</ul>
</body>
</html>
Penerapan jQuery ScrollTo
Melanjutkan dari kode pada tutorial sebelumnya, di sini Saya telah mengubah script ini:
$('#nav a').click(function() {
$('#nav a.active').removeClass('active');
$(this).addClass('active');
});
Menjadi seperti ini untuk menjalankan animasi .scrollTo()
:
$('#nav a').click(function() {
$('#nav a.active').removeClass('active');
$(this).addClass('active');
$('html, body').scrollTo($(this).attr('href'), 1000);
return false;
});
Lebih Lengkap:
$(function() {
// Hilangkan scrollbar
$('html, body').css('overflow', 'hidden');
function updateSize() {
var winWidth = $(window).width(),
winHeight = $(window).height(),
wrapSum = $('.box').siblings().length;
$('#wrap').css({
width:winWidth*(wrapSum/2),
height:winHeight*(wrapSum/3)
});
$('.box').css({
width:winWidth,
height:winHeight
});
} updateSize();
$(window).resize(function() {
updateSize();
});
// Gunakan plugin jQuery scrollTo untuk menciptakan efek smooth scrolling
$('#nav a').click(function() {
$('a.active').removeClass('active');
$(this).addClass('active');
$('html, body').scrollTo($(this).attr('href'), 1000);
// Cegah link mengakses halaman dari atributnya
return false;
});
});
Tanpa plugin scrollTo, menu masih dapat berfungsi dengan baik untuk meloncatkan halaman/seksi pada pandangan user dengan tepat. Hanya saja, efek animasi tidak akan terjadi. Saya tidak tahu banyak mengenai Mootools. Tapi pada intinya, Mootools dan jQuery adalah dua konsep yang sama:
Mootools = JavaScript Library = jQuery
27 Komentar
Anonim
kok susah si masbroo?
Aldi
maksud dari lebih lengkapnya .. apa yaa masss ??? "bingung" heheh
orange.net
wah,, wah,,
makin jauh makin mwanteb postingan'a,,
nanya boleh ya?
kl saya mo buat tampilan ini di sidebar bisa ga ya?(tidak seukuran layar full)
ukuran side bar saya widht:723 height:370
kira2 yang harus diganti dari kode2 dewa diatas apa aja ya?
terimakasih,, :)
sukses selalu buat hompimpa
Anonim
mas, sudah bisa cuman kalo kita pengen masang widget atau postinan di page home misal, caranya kaya gimana yah??
Taufik Nurrohman
@sahadena ???
Pelajari tag kondisional: http://hompimpaalaihumgambreng.blogspot.com/search/label/Tag%20Kondisional
Ngomong-ngomong, ini tempat komentarnya nggak salah alamat? (hehe) Mungkin harusnya di posting Imageflow, atau Widget Daftar Isi Blogger Bernavigasi.
Taufik Nurrohman
@sahadena Eh, iya, nggak salah ding. Hehe... Hebat bisa nerapin tutorial ini ke template blogspot :p
Anonim
kagokedannn.blogspot.com nah di sana saya udah pasang daftar isi di menu home, nah misal kita klik selengkapnya atau misal mau membaca postingan. tapi ko pas di klik masuknua ke home lagi bukan ke postingan yang kita tuju. gmana tuh?? abis penasaran mas. hehe
Taufik Nurrohman
@sahadena Sebenarnya sih tidak hilang, cuma tertutup tabir saja. Coba kamu tekan tombol panah bawah di keyboard sampai terlihat formulir komentar.
Ijal Fauzi
Thanks mas, saya udah terapin. Cuma tutorial ini kurang deh, itu link jquery sama scrollto nya dikasih aja, jangan cuma "scrollTo.js".
Taufik Nurrohman
@Ijal Fauzi Iya, Saya tahu betul mengenai hal yang dikhawatirkan akan membuat mereka menjadi tidak bisa menerapkan dengan cara salin dan tempel :( Tapi Saya justru jauh lebih khawatir jika sampai mereka salah paham mengenai apa itu JavaScript dan apa itu script eksternal. Seperti yang sering Saya temui bahwa kebanyakan dari mereka hanya tahu bahwa yang dinamakan sebagai JQuery adalah sebuah elemen
<script>
yang mengarah kepada URLhttp://ajax.googleapis.com/ajax/libs ... dst
, padahal bukan itu yang menentukan bahwa apa yang Anda lihat adalah JQuery atau bukan. Direktori JQuery tidak hanya ada pada Google, Situs dokumentasi JQuery, bahkan Microsoft juga mempunyai pemuat file tersendiri. Andaipun Saya menuliskan URL asli dari plugin JQuery scrollTo, misalnya seperti ini:Saya khawatir mereka akan menganggap bahwa yang dinamakan sebagai JQuery
.scrollTo()
adalahhttp://hompimpa.googlecode.com/files/scrollTo.js
Lalu bagaimana jika Saya sampai menghapus file tersebut dari direktori Google Code Saya?
Mereka bisa kehilangan akal karena mengira bahwa script tersebut tidak bekerja, padahal itu terjadi karena Saya telah menghapusnya.
Tidak ada hal lain yang bisa Saya lakukan tentang bagaimana cara memberitahu mereka mengenai JavaScript eksternal ini. Saya lebih suka membiarkan mereka belajar sendiri dan menemukan bahwa beginilah yang dinamakan sebagai file eksternal dan internal dan beginilah cara kita menerapkannya.
Dan lagipula, posting ini masuk ke dalam kategori Tingkat Lanjut: http://hompimpaalaihumgambreng.blogspot.com/search/label/Tingkat%20Lanjut
Ijal Fauzi
@Taufik Nurrohman Iya, betul banget mas. Dengan begitu, si pengguna pasti bertanya kenapa ngga bekerja, hahaha. Ide yang bagus untuk membangun sebuah diskusi didalam postingan.
Saya sendiri langsung nyari scrollTo nya, dan akhirnya bisa saya terapkan.
Randy
Ternyata ini yg saya cari2 hehe,thanks mas,mau saya kembangin lagi boleh kan?sebagai uji coba juga hehe
Unknown
Ternyata saya menemukannya disini tapi udah tingakat lanjut, huff... :'( mau mulai dari mana nich setelah mereset templete dengan Eric mayer jadi binggung...
Dixy
Komentar ini telah dihapus oleh pengarang.
Unknown
Komentar ini telah dihapus oleh pengarang.
KMKO Sipil Unhas
bisa nga kalo menu-menunya itu (website, for fun, about.....)
isinya itu langsung blog kita yang lain???
terima kasih
Taufik Nurrohman
OOOOO... Tidak bisaaaa...!!!!
Damar Zaky
wkwkwkwk
sepotong senja
saya mau tanya untuk memasukan content ke dalam halapan tiap2 webnya bagaimana
÷4-p-5-c-0-d-3÷
http://flesler.blogspot.com/2007/10/jqueryscrollto.html>>>>>>LIAT TAHUN POSTINGNYA
http://demos.flesler.com/jquery/scrollTo/
TELAT
÷4-p-5-c-0-d-3÷
INI LAGI
http://tympanus.net/Development/FullscreenLayoutPageTransitions/
GO......................................
barkah
mantap ni,,, thx berat nee,,, :-bd
Unknown
Bermanfaat sekali, Terima Kasih admin.
gua mau tnya kalau seumpama sliding nya ke kanan terus gimana ya ?
Butuh Replynya. mkasih..
Unknown
kang, nuhun nih kan udah saya utak atik nih, tapi kenapa kalau mau pergi ke halaman skill, larinya malah ke halaman home. kalau skillny saya apus tatanannya jadi error, seakan - akan skill ini ada cuma ilang gitu. nuhun.
Taufik Nurrohman
Tidak bisa, soalnya pembagiannya sudah dibuat baku di sini:
Bisa dicoba diutak-atik di bagian itu.
Unknown
jadi seandainya background itu di isi dengan gambar bisa tidak mas?
Unknown
keren gan animasinya.
kak dolop