Vertical Scrollable sebenarnya hampir sama fungsinya dengan Vertical
Slider. Keduanya berfungsi menampilkan teks atau gambar, atau sekaligus
keduanya. Penggunaan Scrollable terutama dimaksudkan untuk effisiensi
ruang. Beberapa bentuk gambar atau teks dapat sekaligus terwadahi dalam
ruang tunggal dengan ukuran yang disesuaikan dengan ketersediaan ruang.
tentu saja penggunaan scrollable juga sekaligus harus dimanfaatkan untuk
menambah daya tarik blog. Scrollable yang satu ini sekalipun bentuknya
mungil namun didesain untuk mampu menampilkan image dan beberapa variasi
teks untuk lebih menajamkan setiap ungkapan yang disampaikan. Link yang
tersedia berfungsi untuk memberi mengarahkan pembaca apabila
menginginkan artikel lengkapnya.
Panduan:
Apabila masih merasa penasaran terhadap bentuk dan fungsi Vertical Scrollable with Effects, kamu bisa melihatnya dengan cara "KLIK DEMO" (jika demo yang satu tak belerja silahkan buka demo ke-2)!
Di bawah ini sudah saya sediakan KODE CSS, Javascript dan xHTML-nya serta jQuery, silahkan untuk mencobanya. Semoga berhasil dan bermanfaat.
Panduan:
- Kali inipun kita masih akan memanfaatkan jQuery.1.3.2.min.js, sebagai upaya untuk memaksimalkan fungsi yang telah tersedia di dalamnya terutama fungsi fade effect-nya. JQuery ini nantinya diletakkan/disimpan di bawah KODE <head>
- KODE CSS disimpan di atas KODE ]]></b:skin>
- Javascript disimpan di di bawah jQuery.1.3.2.min.js
- xHTML diletakkan di bagian body diantara tag <body> dan tag </body> atau di ruang posting.
- Sebelum melakukan langkah lebih lanjut, amankan template terlebih dahulu. Jika ada yang belum tahu cara mengamankan template, kamu bisa melihatnya di sini.
Apabila masih merasa penasaran terhadap bentuk dan fungsi Vertical Scrollable with Effects, kamu bisa melihatnya dengan cara "KLIK DEMO" (jika demo yang satu tak belerja silahkan buka demo ke-2)!
Di bawah ini sudah saya sediakan KODE CSS, Javascript dan xHTML-nya serta jQuery, silahkan untuk mencobanya. Semoga berhasil dan bermanfaat.
Kode CSS - Vertical Scrollable with Effects :
#bagAtas{
width:322px;
border:1px solid #999;
padding:0;
background: url(https://sites.google.com/site/gubhugreyotprojects/jquery/vertical-scrollable/images/bgsGR_vertscrollablec.jpg) no-repeat top center;
height:200px;
}
#bagAtas h2{
font:14px Verdana;
color:red;
font-weight:bold;
margin:4px 2px 0;
display:block;
border-top:1px dotted #999;
border-bottom:1px dotted #999;
padding:2px 5px;
}
#bagAtas h2 i{
font-size:10px;
color:#888;
float:right;
}
#scrollup{
width:293px;
height:165px;
margin:auto;
overflow:hidden;
font-family:Arial;
background:transparent url(https://sites.google.com/site/gubhugreyotprojects/jquery/vertical-scrollable/images/GRtransparentB.png) no-repeat center;
}
.bagBwh{
width:283px;
height:165px;
color:#fff;
display:block;
overflow:hidden;
}
.bagBwh img{
width:50px;
height:60px;
border:2px solid #fff;
padding:1px;
background:#000;
float:left;
margin:5px 6px 0 0;
}
.bagBwh h3 a{
color:#ffcc00;
font-size:14px;
margin:-8px 0 -15px;
padding:0;
text-decoration:none;
display:block;
}
.bagBwh h3 a:hover{
color:red;
}
.bagBwh p{
margin-top:10px;
font-size:10px;
line-height:14px;
}
.bagBwh p b{
font-weight:bold;
color:#00ccff;
font-size:11px;
}
.bagBwh p i{
color:#ffcc00;
}
jQuery.1.3.2.min.js dan Javascript :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> //<![CDATA[ var newsVisualVertical = 5; // waktu display var intervalloVert = 4000; // waktu > 2500 var numNewsVert; var larghezzaDivVert = 283; //width div : buat sama dengan KODE CSS var altezzaDivVert = 136; //height div var margineDivVert = 0; //margin between div $(document).ready(function () { numNewsVert = $("#scrollup").children().length; if (numNewsVert > 0) { jqnewsVertical(); } }); function jqnewsVertical() { if (newsVisualVertical > numNewsVert) { newsVisualVertical = numNewsVert; } for (var i = newsVisualVertical; i < numNewsVert; i++) { $($("#jqnewsVert").children()[i]).css("opacity", "0"); } var gestInter = setInterval(jqNewsRotateVertical, intervalloVert); $("#scrollup").mouseover(function () { clearInterval(gestInter) }); $("#scrollup").mouseout(function () { gestInter = setInterval(jqNewsRotateVertical, intervalloVert); }); } function jqNewsRotateVertical() { //pengaturan effect opacity (interval)// $($("#scrollup").children()[0]).animate({ opacity: 0 }, 1500, "linear", function () { $($("#scrollup").children()[0]).animate({ marginTop: -altezzaDivVert }, 1000, "linear", function () { $($("#scrollup").children()[0]).css("margin", margineDivVert); $("#scrollup").append($($("#scrollup").children()[0])); $($("#scrollup").children()[newsVisualVertical - 1]).animate({ opacity: 1.0 }, 1000); }); }); } //]]> </script>
xHTML - Vertical Scrollable with Effects :
<div id="bagAtas"> <h2>Judul Atas - <i>Teks Miring Kanan Atas</i></h2> <div id="scrollup"> <div class="bagBwh"> <h3><a href="Link-1">Judul Bawah-1</a></h3><p><img src="Image-1.jpg" /><b>Teks Bawah Judul-1</b><br /> <i>Teks Miring Bawah-1</i><br />Tuliskan teks di sini !</p> </div> <div class="bagBwh"> <h3><a href="Link-2">Judul Bawah-2</a></h3><p><img src="Image-2.jpg" /><b>Teks Bawah Judul-1</b><br /> <i>Teks Miring Bawah-2</i><br />Tuliskan teks di sini !</p> </div> <div class="bagBwh"> <h3><a href="Link-3">Judul Bawah-3</a></h3><p><img src="Image-3.jpg" /><b>Teks Bawah Judul-1</b><br /> <i>Teks Miring Bawah-3</i><br />Tuliskan teks di sini !</p> </div> </div> </div>
Catatan/Keterangan:
Pengaturan interval waktu
scrollable dan sekaligus Fade Effects dilakukan di javascript pada var
intervalloVert = 4000. Nilai minimal variabel = 2500. Pada kondisi ini
efek Fade tidak akan nampak oleh karena itu nilainya harus lebih di
atasnya (sebaiknya minimal=3000). Apabila nilai variable di perbesar
maka interval waktunya juga akan semakin lama !
Tidak ada komentar:
Posting Komentar