Mini Niche Scraper Banner 468x60

Vertical Scrollable with Effects

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:
  • 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 !

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:




Update » Senen WAGE, Maret, 26, 2012

» Happy Blogging - gubhugreyot «

Label: ,