Animasi Gulir ke Atas

Penulis : | Kamis, 29 November 2012 | Pukul 15:10:36 | Kategori : Script Gratis - Dibaca : 2648 kali

rangkasku

Tanggal 17 Oktober 2012 tutorial yang terakhir dimuat di rangkasku yaitu tentang Fit Image to Content (CMS Lokomedia) Sudah Lama lama juga rasanya, dan hari ini rangkasku mencoba memuat Tutorial tentang Animasi Gulir ke Atas atau dalam bahasa kerenya Animated Scroll to Top sebetulnya  banyak sekeli bertebaran di Internet tutorial tentang cara membuat Animasi gulir ke atas/ Animated Scroll to Top seperti yang terlihat di Web Rangkasku. Karena adanya permintaan rangkasku pada akhirnya rangkasku membuatnya,  Hal ini sebetulnya sangat sederhana dilakukan dengan jQuery (hanya beberapa baris kode). Kode akan memeriksa apakah posisi teratas scrollbar lebih besar dari nilai tertentu, kemudian memudar di gulir ke tombol atas. Setelah link diklik, maka halaman akan menggulung ke atas.

Desain & CSS

Deklarasikan elment # back-top dengan posisi: tetap sehingga tetap pada halaman. Tag span adalah opsional. Saya menambahkan tag span untuk menampilkan grafik panah. Saya juga menambahkan transisi: 1s (1s = 1 detik) untuk menciptakan efek memudar pada mouse.

 

 

Lihatlah langkahnya pada demo yang bisa Lokomoder download

 

 

#back-top {
	position: fixed;
	bottom: 30px;
	margin-left: -150px;
}

#back-top a {
	width: 108px;
	display: block;
	text-align: center;
	font: 11px/100% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #bbb;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover {
	color: #000;
}

/* arrow icon (span tag) */
#back-top span {
	width: 108px;
	height: 108px;
	display: block;
	margin-bottom: 7px;
	background: #ddd url(up-arrow.png) no-repeat center center;

	/* rounded corners */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;

	/* transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}
#back-top a:hover span {
	background-color: #777;
}

Bagian jQuery  

Berikut ini adalah kode Javascript (Anda dapat tempel dimana saja pada halaman atau Template Lokomedia). Pada dasarnya, ia menyembunyikan elemen # back-top (itu adalah tag id="back-top">

 





No Javascript Fallback

Perhatikan kembali ke tombol atas yang menghubungkan ke jangkar # top yang merupakan ID dari tag

. Secara teknis Anda tidak perlu mengalihkan anchor link karena jQuery dapat menggulir halaman ke posisi apapun. Namun, itu bagus untuk memasukkannya karena memberikan fallback jika Javascript tidak didukung.

Catatan :

Cari dan ganti text hxxp menjadi http pada http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js, penulisan ini dimaksudkan agar tidak bentor dengan jQuery yang ada pada website ini.

Selamat Mencoba


   
Klik untuk Download [361 Kali]
Artikel Terkait

Tidak ada berita terkait

Komentar pada : Animasi Gulir ke Atas Tidak Aktif
    Statistik

    rangkasku hari ini : 52
    rangkaskuTotal : 81842

    rangkaskuHits hari ini : 225
    rangkaskuTotal Hits : 367568

    rangkaskuOnline: 2
    Berlangganan Artikel close