Memasang Slide Show Auto CSS 3
A 2dengan efek zoom teks yang menampilkan gambar di webblog
secara otomatis tampil bergantian dengan efek zoom teks. 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: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;
-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;
color: rgba(169,3,41, 0.8);
}
.my-slideshow li:nth-child(1) span { background-image: url(https://wallpaperscraft.com/image/randis_albion_art_girl_sword_feathers_bird_94348_1920x1080.jpg) }
.my-slideshow li:nth-child(2) span {
background-image: url(https://wallpaperscraft.com/image/dragon_fantasy_art_feathers_98978_1920x1080.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://wallpaperscraft.com/image/dragon_cave_light_art_94937_1920x1080.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://wallpaperscraft.com/image/art_nick_deligaris_dragon_rider_mountain_castle_tower_94138_1920x1080.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://wallpaperscraft.com/image/unicorn_wood_stars_autumn_bird_4771_1920x1200.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://wallpaperscraft.com/image/unicorn_fight_battle_dragon_3312_1920x1200.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-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
-moz-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
-o-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
-ms-transform: scale(1.1);
}
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);
}
25% {
opacity: 0;
transform: scale(1.1);
}
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}
8% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}
8% {
opacity: 1;
-moz-transform: translateY(0px);
}
17% {
opacity: 1;
-moz-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-moz-transform: scale(10);
}
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(200px);
}
8% {
opacity: 1;
-o-transform: translateY(0px);
}
17% {
opacity: 1;
-o-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-o-transform: scale(10);
}
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(200px);
}
8% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(200px);
}
8% {
opacity: 1;
transform: translateY(0px);
}
17% {
opacity: 1;
transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
transform: scale(10);
}
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: 100px }
}
@media screen and (max-width: 600px) {
.my-slideshow li div h3 { font-size: 50px }
}
Kemudian klik entri halaman baru HTML
copy kode berikut pastekan kedalam halaman baru tersebut
copy kode berikut pastekan kedalam halaman baru tersebut
<ul class="my-slideshow">
<li><span>Gambar 01</span><div>
<h3>Myscript2010 </h3>
</div>
</li>
<li><span>Gambar 02</span><div>
<h3>Belajar Webblog </h3>
</div>
</li>
<li><span>Gambar 03</span><div>
<h3>Full Screen </h3>
</div>
</li>
<li><span>Gambar 04</span><div>
<h3>Desainer </h3>
</div>
</li>
<li><span>Gambar 05</span><div>
<h3>Copyright:2015 </h3>
</div>
</li>
<li><span>Gambar 06</span><div>
<h3>Cibeber Cimahi </h3>
</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 
