Home / CSS / Banner Slider Dengan CSS3

Banner Slider Dengan CSS3

Posted by Unknown Selasa, 11 Desember 2012 0 komentar


LOL

Langsung ke tutor aja yah , cape ngetik :3 hehehe .. 

CSS : Letakkan di atas kode ]]></b:skin>

HTML : Letakkan di antara kode HTML/didalam <body> / </body>
HTML :


<div id='slider2'><div id='mask'><ul><li><a href='#' title='#'><img src='URLGAMBAR'/></a></li><li><a href='#' title='#'><img src='URLGAMBAR'/></a></li><li><a href='#' title='#'><img src='URLGAMBAR'/></a></li><li><a href='#' title='#'><img src='URLGAMBAR'/></a></li></ul></div><div id='progress'></div><div id='overlay'></div><div id='pause'></div></div> 

<a href='#' ( ganti tanda # dg URL yang di tuju )
title='#' ( ganti dg nama link yang di tuju )
'URLGAMBAR' ( ganti dengan url gambar banner yg di tuju )


CSS :


#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#fff;
border:10px solid #fff;
}
#slider2:hover #pause {
opacity:1;
}
#slider2:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#ffd000;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider2 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider2 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider2 li:last-of-type {
background-color:#362c30;
}
#slider2 li a {
display:block;
text-decoration:none;
}
#slider2 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider2 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:'Communist-Regular';
text-shadow:1px 1px 1px #362c30;
}

untuk slider nya udah di atur kecepatan slidenya lebih lambar dari yang asli nya .
di atur dg CSS keyframe slide-animation

dan pemasangan banner ini terbatas,hanya 4 buah banner aja , kenapa ga bisa lebih ?
sebenernya bisa , pertama perhatikan CSS berikut :


 @-webkit-keyframes slide-animation {0% {opacity:0;}2% {opacity:1;}20% {left:0px; opacity:1;}22.5% {opacity:0.6;}25% {left:-468px; opacity:1;}45% {left:-468px; opacity:1;}47.5% {opacity:0.6;}50% {left:-936px; opacity:1;}70% {left:-936px; opacity:1;}72.5% {opacity:0.6;}75% {left:-1404px; opacity:1;}95% {opacity:1;}98% {left:-1404px; opacity:0;}100% {left:0px; opacity:0;}}
perhatikan saat 25% dan 45%, left:-468px; .jadi saat css slider sudah difungsikan untuk bergeser ke arah kiri sejauh 468px.
1. maka karena itu jika ukuran gambar tidak tepat/sama,yang terjadi pergerakan slider menjadi tidak sempurna.
2.bila kamu perhatikan,kenapa di timing 47.5% menggunakan opacity?itu hanya perfungsi sebagai fade effect/transparant sesaat akan bergeser.
3.di timing 50% 70% bernilai -936px dan 75% 98% -1404px. kenapa bisa begitu?itu artinya slide akan selalu bergeser ke arah kiri sejauh -468px.dan selanjutnya juga pindah ke slide selanjutnya,maka akan bergeser lagi sejauh -468px.begini perhitungan dan teorinya:
-ketika suatu objek digeser kearah kiri,maka akan bernilai minus,maka 
0-468 = -468
digeser ke arah kiri lagi menjadi
-468-468 = -936
digeser ke arah kiri lagi menjadi
-936-468 = -1404
lalu di timing 100% kembali ke posisi awal yaitu 0.
nah,jadi bagai mana kalau mau menambahkan slider lagi? kalian harus membuat perhitungan sendiri mulai dari timing 0% sampai 100%.
jadi semoga saja bisa dipahami dari penjelasan saya diatas,pastinya ada hubunganya dengan perhitungan matematika xD
karena jika anda mengerti dengan fungsi diatas,kamu bisa mengatur slide ini sendiri dengan ukuran bebas.

Note : CSS di atas hanya contoh , karena slidernya ini crossbrowser antara mozzila dan chrome ,
maka perhatikan awalan depan css moz dan webkit , nilai nya harus sama .


Untuk pengaturan posisi slidernya,menggunakan margin.
margin:0px 0px 0px 0px;
#slider2 {width: 468px;height: 60px;margin:0px 0px 0px 0px;overflow: hidden;background-color: #F8F8F8;border: 10px solid #F8F8F8;-moz-transition: all 170ms ease-in;-webkit-transition: all 170ms ease-in;-o-transition: all 170ms ease-in;position: relative;border-radius: 10px/20px;}

Setting di atas masih default , kamu tinggal mengatur nilai margin left , top , right dan bottomnya

saya sarankan sebelum menggunakan trik banner slider ini , backup dulu template kamu , agar tidak terjadi hal yang tidak diinginkan .

Semoga Bermanfaat !

Sumber


==========================================================================

Jika Artikel Ini Bermanfaat Untuk Anda Semua . Anda bisa menyebarluaskan Artikel ini
Tetapi , Dimohon untuk Cantumkan Sumbernya .
Dan untuk pengembangan Blog Zhura XpressX , Saya Menerima Donasi dari Anda Semua.
Semakin banyak Donasi semakin banyak Artikel menarik / cheat yang selalu Update .
Anda bisa Donasi seikhlas nya ke nomor beriku :


Im3 : 085624675390
XL  : 087724813559
Berapapun sumbangan anda , Saya sangat berterimakasih kepada Anda .
Salam Admin RezzaDz

==========================================================================


TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Banner Slider Dengan CSS3
Ditulis oleh Unknown
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke https://android-round.blogspot.com/2012/12/banner-slider-dengan-css3.html. Terima kasih sudah singgah membaca artikel ini.
Categories:

If You Like This Post, Share it With Your Friends

0 komentar:

Posting Komentar

Trik SEO Terbaru support Online Shop Baju Wanita - Original design by Bamz | Copyright of Android round.
Diberdayakan oleh Blogger.