Menu


Menu Tab

Pages

Showing posts with label CSS3 Slideshow Full Screen B.3. Show all posts
Showing posts with label CSS3 Slideshow Full Screen B.3. Show all posts

CSS3 Slideshow Full Screen B.3



Memasang Slide Show auto CSS 3
menggunakan kode CSS dan HTML
yang menampilkan gambar di webblog secara otomatis
tampil bergantian. Berikut cara penerapannya :
.
Login ke akun blog klik edit HTML  temukan kode ]]></b:skin>
gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin>  
dan klik simpan selesai
.my-slideshow,
.my-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.my-slideshow:after {
content: '';
background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left;
}
.my-slideshow 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;
}
.my-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-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;
}
.my-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.my-slideshow li:nth-child(1) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF29MlKr0eRmEjRtcdg01wiXFGtbNkoxgdGfdnTK9Qf2-YQbGJQs_1E8wEPi6erRPPqmkdTBlC127hsP38_rdF-kNKoqJncn7XFV6Im8UrXoL5aEoSY6xaWNlBD3ZFixtVBsLOEgrW5Xym/s1600-r/spMys2010a1.jpg)
}
.my-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaF_7LjhoYljKgiTZ1riOtS9V1-kS-3FqPtvF9hJHpRbTLfTsgewEkLCtomABjaeeKeqFIfKplUCo3mNxsNFBpgKqVJmjkeNvF5xHO5dDRI-bG7KhItgUzRLaaXNNczirROk4Z0Rfi6sZI/s1600-r/spMys2010s3.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Z52-Y4uvzuPFLQoDDiEROQT_PHdEWEEE5A4PkAdf9-YDWNJNQlypCX_co-Z_dxwgWfsc8jmYEVxWSXNhV35Pyc6B-H-XFseRi3FkHdJDYaEYhePMQqdCM8U_kMC__ZUtssj5CnHXWrpf/s1600-r/spMys2010s2.jpg );
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjipKmG4jIbFtRBOxfdBh0pw4P_u8x2a77-7R0ZROl7npUayzmk-exFEYzHxZmNJD85uExlXaMDo00Mh424qTncC_zZ494ScBHLhlMpnWscD6CdUqWKl7lGDFOaXjfMt56D1rGS-xRELBpI/s1600-r/01mys2010.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQHAikwzIsbOGnvAl1tACFqFj6s80f7UcRh9-86X6ZFt32foJvANmZHc6mNMDnoipqoHPikeljAo1pFvoEvNL3RPuF3TnXcjO_wJPufzFXX_22UfWt4_tyOzj1t6-UOzYrvRlwKb1uaTY/s1600-r/03mys2010.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHVceJPIvW_Xm9ywbtt6cE7v_fBJaFUEpKLNs2pQNiKL6I1T3GMfageWvEIAApEM98LYHxBPaz5WvBKpxieBD_JNXSv40ckRHbbO2XKKN0LWW96UsXOY3xz5U2WCU_Lx7f_WgKTZNyImtV/s1600-r/sp.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.my-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .my-slideshow li span{
opacity: 1;
}

@media screen and (max-width: 1140px) {
.my-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.my-slideshow li div h3 { font-size: 80px }
}
Kemudian klik entri halaman baru HTML
copy kode berikut pastekan kedalam halaman baru tersebut
<ul class="my-slideshow">
<li><span>Gambar 01</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 02</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 03</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 04</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 05</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 06</span><div>
<h4>  </h4>
</div>
</li>
</ul>
Penjelasan :
Ganti Link gambar dan teks yang berwarna orange sesuai keinginan
untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template
Sumber by. Tympanus
Edited   by. Myscript2010

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi