Satu Halaman Website Statis dengan Efek Sliding
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 Comments:
kok susah si masbroo?
maksud dari lebih lengkapnya .. apa yaa masss ??? "bingung" heheh
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
mas, sudah bisa cuman kalo kita pengen masang widget atau postinan di page home misal, caranya kaya gimana yah??
@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.
@sahadena Eh, iya, nggak salah ding. Hehe... Hebat bisa nerapin tutorial ini ke template blogspot :p
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
@sahadena Sebenarnya sih tidak hilang, cuma tertutup tabir saja. Coba kamu tekan tombol panah bawah di keyboard sampai terlihat formulir komentar.
Thanks mas, saya udah terapin. Cuma tutorial ini kurang deh, itu link jquery sama scrollto nya dikasih aja, jangan cuma "scrollTo.js".
@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 URL http://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:
<script src='http://hompimpa.googlecode.com/files/jquery.scrollTo.js' type='text/javascript'></script>
Saya khawatir mereka akan menganggap bahwa yang dinamakan sebagai JQuery .scrollTo() adalah http://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
@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.
Ternyata ini yg saya cari2 hehe,thanks mas,mau saya kembangin lagi boleh kan?sebagai uji coba juga hehe
Ternyata saya menemukannya disini tapi udah tingakat lanjut, huff... :'( mau mulai dari mana nich setelah mereset templete dengan Eric mayer jadi binggung...
This comment has been removed by the author.
This comment has been removed by the author.
bisa nga kalo menu-menunya itu (website, for fun, about.....)
isinya itu langsung blog kita yang lain???
terima kasih
OOOOO... Tidak bisaaaa...!!!!
saya mau tanya untuk memasukan content ke dalam halapan tiap2 webnya bagaimana
wkwkwkwk
http://flesler.blogspot.com/2007/10/jqueryscrollto.html>>>>>>LIAT TAHUN POSTINGNYA
http://demos.flesler.com/jquery/scrollTo/
TELAT
INI LAGI
http://tympanus.net/Development/FullscreenLayoutPageTransitions/
GO......................................
mantap ni,,, thx berat nee,,, :-bd
Bermanfaat sekali, Terima Kasih admin.
gua mau tnya kalau seumpama sliding nya ke kanan terus gimana ya ?
Butuh Replynya. mkasih..
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.
Tidak bisa, soalnya pembagiannya sudah dibuat baku di sini:
$('#wrap').css({
width:winWidth*(wrapSum/2),
height:winHeight*(wrapSum/3)
});
Bisa dicoba diutak-atik di bagian itu.
jadi seandainya background itu di isi dengan gambar bisa tidak mas?
keren gan animasinya.
kak dolop
Post a Comment
<< Home