მთავარი » 2012 » აგვისტო » 19 » ucoz slider
11:56 PM
ucoz slider
ღწერა: ეს არის ლამაზი სლაიდერი თქვენი საიტისათვის 



<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/s4/1208/19/c/cf4ca149bba3.jpg"></a><span><h2></h2></span> 
 </li> 
 <li> 
 <a href="#" title="ADD YOUR TITLE HERE"><img src="http://www.picz.ge/img/s1/1208/19/0/0f2940557392.jpg"></a> 
 <span><h2></h2></span> 
 </li> 
 <li> 
 <iframe src="http://www.picz.ge/img/s3/1208/19/8/853e4b5ca9cf.jpg" width="600" height="200" frameborder="0" scrolling="no"></iframe> 
 <span><h2></h2></span> 
 </li> 
 <li> 
 <a href="#" title="ADD YOUR TITLE HERE"><img src="http://www.picz.ge/img/s1/1208/19/0/0d4e99d39a7d.jpg"></a> 
 </li> 
 </ul> 
 </div> 
 <div id="progress"> 
 </div> 
 <div id="overlay"> 
 </div> 
 <div id="pause"> 
 </div> 
 </div> 
 </div> 
კატეგორია: სკრიპტები | ნანახია: 668 | დაამატა: muriko | რეიტინგი: 0.0/0
სულ კომენტარები: 0
კომენტარის დამატება შეუძლიათ მხოლოდ დარეგისტრირებულ მომხმარებლებს
[ რეგისტრაცია | შესვლა ]