السلام عليكم ورحمة الله وبركاته
يسر فريق عمل | مدونة بلوجر أن يقدم لكم إضافة سلايد شو بتقنية CSS
السلايد شو في قمة الروعة لعرض مشاركاتك الأخيرة .
- طريقة التركيب :
1- أدخل إلى مدونتك | ثم أختر تحرير قالب .
2- إبحث عن الوسم : ]]></b:skin>
3- ضع الكود التالي فوقه .
#content-downslider { width:100%; height:265px; margin:10px auto 0; } #downslider { background:#000; border:5px solid #52e052; box-shadow:1px 1px 5px #52e052; height:265px; width:550px; overflow:visible; position:relative; } #mask { overflow:hidden; height:265px; } #downslider ul { margin:0; padding:0; position:relative; } #downslider li { width:550px; height:265px; position:absolute; top:-270px; list-style:none; } #downslider li.firstanimation { -moz-animation:cycle 25s linear infinite; -webkit-animation:cycle 25s linear infinite; } #downslider li.secondanimation { -moz-animation:cycletwo 25s linear infinite; -webkit-animation:cycletwo 25s linear infinite; } #downslider li.thirdanimation { -moz-animation:cyclethree 25s linear infinite; -webkit-animation:cyclethree 25s linear infinite; } #downslider li.fourthanimation { -moz-animation:cyclefour 25s linear infinite; -webkit-animation:cyclefour 25s linear infinite; } #downslider li.fifthanimation { -moz-animation:cyclefive 25s linear infinite; -webkit-animation:cyclefive 25s linear infinite; } #downslider .tooltip { background:rgba(0,0,0,0.7); width:300px; height:60px; position:relative; bottom:75px; left:-320px; -moz-transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; } #downslider .tooltip h1 { color:#fff; font-size:24px; font-weight:300; line-height:60px; padding:0 0 0 20px; } #downslider li#first:hover .tooltip, #downslider li#second:hover .tooltip, #downslider li#third:hover .tooltip, #downslider li#fourth:hover .tooltip, #downslider li#fifth:hover .tooltip { left:0px; } #downslider:hover li, #downslider:hover .progress-bar { -moz-animation-play-state:paused; -webkit-animation-play-state:paused; } .progress-bar { position:relative; top:-5px; width:550px; height:5px; background:#000; -moz-animation:fullexpand 25s ease-out infinite; -webkit-animation:fullexpand 25s ease-out infinite; }@-moz-keyframes cycle { 0% { top:0px; } 4% { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-moz-keyframes cycletwo { 0% { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclethree { 0% { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefour { 0% { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-moz-keyframes cyclefive { 0% { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } @-webkit-keyframes cycle { 0% { top:0px; } 4% { top:0px; } 16% { top:0px; opacity:1; z-index:0; } 20% { top:325px; opacity:0; z-index:0; } 21% { top:-325px; opacity:0; z-index:-1; } 50% { top:-325px; opacity:0; z-index:-1; } 92% { top:-325px; opacity:0; z-index:0; } 96% { top:-325px; opacity:0; } 100%{ top:0px; opacity:1; } } @-webkit-keyframes cycletwo { 0% { top:-325px; opacity:0; } 16% { top:-325px; opacity:0; } 20% { top:0px; opacity:1; } 24% { top:0px; opacity:1; } 36% { top:0px; opacity:1; z-index:0; } 40% { top:325px; opacity:0; z-index:0; } 41% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclethree { 0% { top:-325px; opacity:0; } 36% { top:-325px; opacity:0; } 40% { top:0px; opacity:1; } 44% { top:0px; opacity:1; } 56% { top:0px; opacity:1; z-index:0; } 60% { top:325px; opacity:0; z-index:0; } 61% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefour { 0% { top:-325px; opacity:0; } 56% { top:-325px; opacity:0; } 60% { top:0px; opacity:1; } 64% { top:0px; opacity:1; } 76% { top:0px; opacity:1; z-index:0; } 80% { top:325px; opacity:0; z-index:0; } 81% { top:-325px; opacity:0; z-index:-1; } 100%{ top:-325px; opacity:0; z-index:-1; } } @-webkit-keyframes cyclefive { 0% { top:-325px; opacity:0; } 76% { top:-325px; opacity:0; } 80% { top:0px; opacity:1; } 84% { top:0px; opacity:1; } 96% { top:0px; opacity:1; z-index:0; } 100%{ top:325px; opacity:0; z-index:0; } } @-moz-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } } @-webkit-keyframes fullexpand { 0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; } 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; } 16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; } 17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; } 18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } }
4- أذهب إلى تخطيط | أختر إضافة أداة : HTML/JavaScript
5- الصق الكود التالي في صندوق الأداة .
<div id="content-downslider"> <div id="downslider"> <div id="mask"> <ul> <li class="firstanimation" id="first"> <a href="#"> <img alt="" src="https://lh4.googleusercontent.com/-qllh7D9awTY/Uc5WfREE3jI/AAAAAAAAFMU/g2xCnz6cyR4/w680-h320-no/Faceblog+Evolutions+%25285%2529.jpg" /> </a> <div class="tooltip"> <h1> فريق عمل مدونة هوم بلوجر</h1> </div> </li> <li class="secondanimation" id="second"> <a href="#"> <img alt="" src="https://lh4.googleusercontent.com/-tvu5hREpnTw/Uc5WeZHKjnI/AAAAAAAAFMM/pKTIoYYrCUc/w680-h320-no/Faceblog+Evolutions+%25283%2529.jpg" /> </a> <div class="tooltip"> <h1> فريق عمل مدونة هوم بلوجر</h1> </div> </li> <li class="thirdanimation" id="third"> <a href="#"> <img alt="" src="https://lh3.googleusercontent.com/-tBzK3oI06oY/Uc5WdrGAxKI/AAAAAAAAFMA/wBvKjcJB28Y/w680-h320-no/Faceblog+Evolutions+%25284%2529.jpg" /> </a> <div class="tooltip"> <h1> فريق عمل مدونة هوم بلوجر</h1> </div> </li> <li class="fourthanimation" id="fourth"> <a href="#"> <img alt="" src="https://lh3.googleusercontent.com/-mmMeS9EWh9A/Uc5WdvPyBmI/AAAAAAAAFME/r_BpYrOEOUE/w680-h320-no/Faceblog+Evolutions+%25281%2529.jpg" /> </a> <div class="tooltip"> <h1> فريق عمل مدونة هوم بلوجر</h1> </div> </li> <li class="fifthanimation" id="fifth"> <a href="#> <img alt="" src="https://lh6.googleusercontent.com/-6KQTxjdk0Bg/Uc5WcNez4kI/AAAAAAAAFL0/mQsiEF16QYM/w680-h320-no/Faceblog+Evolutions+%25282%2529.jpg" /> </a> <div class="tooltip"> <h1> فريق عمل مدونة هوم بلوجر</h1> </div> </li> </ul></div> <div class="progress-bar"></div> </div> </div>
- التعديلات :
- عدل ماهو باللون الأحمر ( الصورة والوصف ) .
0 Comments:
إرسال تعليق