მთავარი » 2013 » ივნისი » 12 » slaideri
7:46 AM
slaideri
<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;
}
 
#overlay {
 width: 600px;
 height: 200px;
 position: absolute;
 top: 0;
 background-image: url(http://1.bp.blogspot.com/-T3HoE0hcDSk/T-SJMBDpS7I/AAAAAAAACBA/gVo5LjEEOrY/s1600/helperblogger.com-overlay.png);
 background-position: center;
 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;
 opacity: 0.5;
 -moz-animation: overlay-fade 18s infinite;
 -webkit-animation: overlay-fade 18s infinite;
}
 
#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="ADD YOUR TITLE HERE"><img src="http://www.picz.ge/img/s2/1304/6/2/22ddd15d5b90.png"></a><span><h2></h2></span>
 </li>
 <li>
 <a href="#" title="ADD YOUR TITLE HERE"><img src="http://www.picz.ge/img/s1/1304/6/c/c71754114856.png"></a><span><h2></h2></span>
 </li>
 <li>
 <a href="#" title="ADD YOUR TITLE HERE"><img src="http://www.picz.ge/img/s1/1304/6/a/a578e49bf560.png"></a>
 <span><h2></h2></span>
 </li>
 <li>
 <iframe src="http://www.picz.ge/img/s1/1208/19/0/0d4e99d39a7d.jpg" width="600" height="200" frameborder="0" scrolling="no"></iframe>
 <span><h2></h2></span>
 </li>
 </ul></div>
 <div id="progress">
 </div>
 <div id="overlay">
 </div>
 <div id="pause">
 </div>
 </div>
 </div> </form>
კატეგორია: სკრიპტები | ნანახია: 798 | დაამატა: muriko | რეიტინგი: 0.0/0
სულ კომენტარები: 0
კომენტარის დამატება შეუძლიათ მხოლოდ დარეგისტრირებულ მომხმარებლებს
[ რეგისტრაცია | შესვლა ]