Show Comments: OR
100 100 100

وضع سلايد شو في خلفية المدونة Slidshow

طريقة عمل خلفية للمدونة على شكل Slidshow
مرحبا سوف أقدم  لكم شئ جديد اليوم وهو طريقة وضع سلايد شو في خلفية المدونة و إلكم الشرح بالفيديو :





















وهنا أقدم لكم شرح مكتوب :



أولا ندخل على تحرير html توسيع القالب ثم نبحث عن :   Outer-Wrapper



ونضيف بعده هذه العبارة : opacity:0.9;



ثانيا نبحث عن :

]]></b:skin>



ونضيف فوقه كود الcss التالي :



/* CBSlide-BY-Ayoub.Etmaiti
----------------------------------------------- */
.CBS-Ayoub-Etmaiti,
.CBS-Ayoub-Etmaiti:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.CBS-Ayoub-Etmaiti:after {
content: '';
background: transparent url(http://1.bp.blogspot.com/-oIUwg-kYYww/TwHcFJNdpbI/AAAAAAAASUM/Xajrx6UuZ4A/s1600/pattern.png) repeat top left;
}
.CBS-Ayoub-Etmaiti li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.CBS-Ayoub-Etmaiti li div {
z-index: 1000;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.CBS-Ayoub-Etmaiti li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);
}
.CBS-Ayoub-Etmaiti li:nth-child(1) span { background-image: url(https://lh5.googleusercontent.com/-umn39TSVmKs/TpNVbgZ7MkI/AAAAAAAAAjs/4xH5GaiBMDs/s903/SANY0048.JPG) }
.CBS-Ayoub-Etmaiti li:nth-child(2) span {
background-image: url(https://lh3.googleusercontent.com/-pg71qoEK8L4/TpNVxNFXG6I/AAAAAAAAAjw/8iu8IK6Uc3g/s903/SANY0050.JPG);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.CBS-Ayoub-Etmaiti li:nth-child(3) span {
background-image: url(https://lh5.googleusercontent.com/-AaZ8gHb6azQ/TpNXOBMRJII/AAAAAAAAAkI/wzm9Mve5BDY/s903/SANY0059.JPG);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.CBS-Ayoub-Etmaiti li:nth-child(4) span {
background-image: url(https://lh5.googleusercontent.com/-SgrYJrjxal8/TpNXqx3i5WI/AAAAAAAAAkQ/HjmiV0CB0xQ/s903/SANY0061.JPG);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.CBS-Ayoub-Etmaiti li:nth-child(5) span {
background-image: url(https://lh5.googleusercontent.com/-aagk-eWQIUE/TpNX_xJmGXI/AAAAAAAAAkU/PE3wickISzk/s903/SANY0063.JPG);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.CBS-Ayoub-Etmaiti li:nth-child(6) span {
background-image: url(https://lh4.googleusercontent.com/-KCFmHUUD1K4/TpNZDRJTP_I/AAAAAAAAAko/sjyOU0ahBfA/s903/SANY0069.JPG);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.CBS-Ayoub-Etmaiti li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.CBS-Ayoub-Etmaiti li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.CBS-Ayoub-Etmaiti li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.CBS-Ayoub-Etmaiti li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.CBS-Ayoub-Etmaiti li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
   opacity: 0;
   -webkit-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -webkit-transform: scale(1.05);
   -webkit-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -webkit-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
   opacity: 0;
   -moz-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -moz-transform: scale(1.05);
   -moz-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -moz-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
   opacity: 0;
   -o-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -o-transform: scale(1.05);
   -o-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -o-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
   opacity: 0;
   -ms-animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   -ms-transform: scale(1.05);
   -ms-animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   -ms-transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   -ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
   opacity: 0;
   animation-timing-function: ease-in;
}
8% {
   opacity: 1;
   transform: scale(1.05);
   animation-timing-function: ease-out;
}
17% {
   opacity: 1;
   transform: scale(1.1) rotate(3deg);
}
25% {
   opacity: 0;
   transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
   opacity: 0;
   -webkit-transform: translateX(200px);
}
8% {
   opacity: 1;
   -webkit-transform: translateX(0px);
}
17% {
   opacity: 1;
   -webkit-transform: translateX(0px);
}
19% {
   opacity: 0;
   -webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
   opacity: 0;
   -moz-transform: translateX(200px);
}
8% {
   opacity: 1;
   -moz-transform: translateX(0px);
}
17% {
   opacity: 1;
   -moz-transform: translateX(0px);
}
19% {
   opacity: 0;
   -moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
   opacity: 0;
   -o-transform: translateX(200px);
}
8% {
   opacity: 1;
   -o-transform: translateX(0px);
}
17% {
   opacity: 1;
   -o-transform: translateX(0px);
}
19% {
   opacity: 0;
   -o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
   opacity: 0;
   -ms-transform: translateX(200px);
}
8% {
   opacity: 1;
   -ms-transform: translateX(0px);
}
17% {
   opacity: 1;
   -ms-transform: translateX(0px);
}
19% {
   opacity: 0;
   -ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
   opacity: 0;
   transform: translateX(200px);
}
8% {
   opacity: 1;
   transform: translateX(0px);
}
17% {
   opacity: 1;
   transform: translateX(0px);
}
19% {
   opacity: 0;
   transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .CBS-Ayoub-Etmaiti li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.CBS-Ayoub-Etmaiti li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.CBS-Ayoub-Etmaiti li div h3 { font-size: 50px }
}



وثالثا وأخيرا نضيف الكود التالي بعد <body>



<ul class='cb-slideshow'>
          <li><span>Image 01</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
          <li><span>Image 02</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
          <li><span>Image 03</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
          <li><span>Image 04</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
          <li><span>Image 05</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
          <li><span>Image 06</span><div><h3>أكتب أي كلام ترده أن يظهر</h3></div></li>
      </ul>


وهذا هو كل شئ ولتنسوا المعاينة قبل حفظ القالب ;)

معلومات عن التدوينة الكاتب : rimon nazar بتاريخ : الاثنين، 17 يونيو، 2013
المشاهدات :
للإبلاغ عن رابط معطوب اضغط هنا
قالب خيال ..إبداع ويب .