Resim Slider (Slayt) Eklentisi
27.11.15
By
WebSeyyahi
Değişik amaçlarla kullanılabilecek site içi çalışan güzel bir manşet alanı
* Paylaşımlarınızı yazdığınız panelde HTML kısmından ekleyerek tek bir sayfa içinde de kullanabilirsiniz.
Standart HTML/CCS yapısı kullanılmıştır, isterseniz değiştirip temanıza uygun görsellikte kullanabilirsiniz.
Resimler fixlenmemiştir, yani resim ölçülerini (px) ekleyeceğiniz alana göre önceden boyutlandırmanız gerekmektedir.
Bloggerde Resim slider, slayt alanı yada manşet alanında kullanabilirsiniz.
<style>
#slider {
width: 600px;
height: 200px;
margin: 40px auto 0;
overflow: visible;
background-color: #362c30;
border: 10px solid #362c30;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
position: relative;
}
#mask {
overflow: hidden;
}
#slider:hover {
background-color: #fff;
border: 10px solid #ddd;
}
#slider:hover #pause {
opacity: 1;
}
#slider:hover #progress {
background-color: rgba(255,255,255,0.0);
}
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#pause {
width: 600px;
height: 200px;
position: absolute;
top: 0;
opacity: 0;
background-image: url(http://4.bp.blogspot.com/-McXB4t7-Yic/T-SJM7gabwI/AAAAAAAACBI/lKDrkN-M-Z8/s1600/helperblogger.com-paused.png);
background-position: 566px 10px;
background-repeat: no-repeat;
pointer-events: none;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
}
#progress {
width: 1px;
height: 1px;
background-color: #ffd000;
-moz-animation: progress 18s infinite;
-webkit-animation: progress 18s infinite;
position: relative;
top: -1px;
-moz-transition: all 150ms ease-in;
-webkit-transition: all 150ms ease-in;
-o-transition: all 150ms ease-in;
}
#slider ul {
width: 2400px;
list-style: none;
padding: 0;
margin: 0;
-moz-animation: slide-animation 18s infinite;
-webkit-animation: slide-animation 18s infinite;
position: relative;
left: 0px;
}
#slider li {
display: inline;
width: 600px;
height: 200px;
margin: 0;
padding: 0;
float: left;
position: relative;
background-image: url(http://4.bp.blogspot.com/-yKmATamNi5A/T-SJK85LUvI/AAAAAAAACA4/ZfhUPC0hYM0/s1600/helperblogger.com-loader.gif);
background-position: 50% 50%;
background-repeat: no-repeat;
}
#slider li:last-of-type {
background-color: #362c30;
}
#slider li a {
display: block;
text-decoration: none;
}
#slider 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;
}
#slider-shadow {
width: 100%;
height: 260px;
background-image: url(http://2.bp.blogspot.com/-H3qemmsLsak/T-SJN16OKeI/AAAAAAAACBQ/cmXQQxIccVk/s1600/helperblogger.com-slider-shadow.png);
background-position: center bottom;
background-repeat: no-repeat;
margin: 10px auto 0;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; 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:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:600px; opacity:1;}
22.5% {width:600px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:600px; opacity:1;}
47.5% {width:600px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:600px; opacity:1;}
72.5% {width:600px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:600px; opacity:1;}
98% {width:600px; 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;}
}
#slider 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;
}
</style>
<div id="slider-shadow">
<div id="slider">
<div id="mask">
<ul>
<li>
<a href="#" title="Resim Açıklaması"><img src="http://2.bp.blogspot.com/-DX76JjnhxSU/T-SKKTpfngI/AAAAAAAACBc/QFZHfs5Ennw/s1600/helperblogger.com-1.png" /></a><span><h2>RESİM YAZISI</h2></span>
</li>
<li>
<a href="#" title="Resim Açıklaması"><img src="http://2.bp.blogspot.com/-aoORfM4wZ-4/UvZSwBzKBdI/AAAAAAAALqQ/dZAt5wTUOBM/s1600/2014-02-08+17+52.png" /></a>
<span><h2>RESİM YAZISI</h2></span>
</li>
<li>
<a href="#" title="Resim Açıklaması"><img src="http://2.bp.blogspot.com/-DX76JjnhxSU/T-SKKTpfngI/AAAAAAAACBc/QFZHfs5Ennw/s1600/helperblogger.com-1.png" /></a><span><h2>RESİM YAZISI</h2></span>
</li>
<li>
<a href="#" title="Resim Açıklaması"><img src="http://2.bp.blogspot.com/-aoORfM4wZ-4/UvZSwBzKBdI/AAAAAAAALqQ/dZAt5wTUOBM/s1600/2014-02-08+17+52.png" /></a>
<span><h2>RESİM YAZISI</h2></span>
</li>
</ul>
</div>
<div id="progress">
</div>
<div id="overlay">
</div>
<div id="pause">
</div>
</div>
</div><!--Author: webkenti.net-->
HTML / JAVASCRIPT EKLEMEK
Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz
Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.
* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.
♥ ........ Velhâsıl kelam, Yıktık perdeyi eyledik viran, Sürç-i lisan ettiysek affola ! ........ ♥
0 yorum: