Splash Effects dengan CSS3 dan Curtain opening dengan Jquery

1.buka blogger =>template=>edit HTML
2.lalu Copy paste CSS di atas kode ]]></b:skin>
.sp-container {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: fixed;
display:none;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 99999999999999999999999999999999999;
background: -webkit-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -moz-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 1));
background: -ms-radial-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
background: radial-gradient(rgba(0, 0, 0, 03.), rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 1));
-webkit-animation-name: tes;
-webkit-animation-duration: 1s;
-moz-animation-name: tes;
-moz-animation-duration: 1s;

}
.sp-content {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
width: 100%;
height: 100%;
left: 0px;
top: 0px;
z-index: 1000;
}
.sp-container h2 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
top: 50%;
line-height: 100px;
height: 100px;
margin-top: -50px;
font-size: 100px;
width: 100%;
text-align: center;
color: transparent;
-webkit-animation: blurFadeInOut 3s ease-in backwards;
-moz-animation: blurFadeInOut 3s ease-in backwards;
-ms-animation: blurFadeInOut 3s ease-in backwards;
animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h2.frame-1 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
}
.sp-container h2.frame-2 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 2s;
-moz-animation-delay: 2s;
-ms-animation-delay: 2s;
animation-delay: 2s;
}
.sp-container h2.frame-3 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 4s;
-moz-animation-delay: 4s;
-ms-animation-delay: 4s;
animation-delay: 4s;
}
.sp-container h2.frame-4 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
font-size: 200px;
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.sp-container h2.frame-5 {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation: blurFadeIn 3s ease-in 8s backwards;
-moz-animation: blurFadeIn 1s ease-in 8s backwards;
-ms-animation: blurFadeIn 3s ease-in 8s backwards;
animation: blurFadeIn 3s ease-in 8s backwards;
color: transparent;
text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span:nth-child(2) {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 10s;
-moz-animation-delay: 10s;
-ms-animation-delay: 10s;
animation-delay: 10s;
}
.sp-container h2.frame-5 span:nth-child(3) {/* By Johanes Dj - http://Djogzs.blogspot.com*/
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.sp-circle-link {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
left: 50%;
bottom: 100px;
margin-left: -50px;
text-align: center;
line-height: 100px;
width: 100px;
height: 100px;
background: #85373b;
color: #3f1616;
font-size: 25px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px double rgba(255, 255, 255, 1 );
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.sp-circle-link a{color:#fff;}
.sp-link {/* By Johanes Dj - http://Djogzs.blogspot.com*/
position: absolute;
bottom: 190px;
margin: auto;
text-align: center;
line-height: 100px;
width: 100%;
height: 100px;
font-size: 30px;
-webkit-animation: fadeInRotate 1s linear 14s backwards;
-moz-animation: fadeInRotate 1s linear 14s backwards;
-ms-animation: fadeInRotate 1s linear 14s backwards;
animation: fadeInRotate 1s linear 14s backwards;
-webkit-transform: scale(1) rotate(0deg);
-moz-transform: scale(1) rotate(0deg);
-o-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
.sp-link a{color:#fff;}

.sp-circle-link:hover {
background: #85373b;/* By Johanes Dj - http://Djogzs.blogspot.com*/
color: #fff;/* By Johanes Dj - http://Djogzs.blogspot.com*/
}
/* By Johanes Dj - http://Djogzs.blogspot.com*/
@-webkit-keyframes tes{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

/* By Johanes Dj - http://Djogzs.blogspot.com*/
@-moz-keyframes tes{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
left:-2200px;
}
100%{
left:0px;
}
}

@-webkit-keyframes blurFadeInOut{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-webkit-transform: scale(0);
}
}
@-webkit-keyframes blurFadeIn{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-webkit-transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
-webkit-transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-webkit-transform: scale(1);
}
}
@-webkit-keyframes fadeInRotate{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
-webkit-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-webkit-transform: scale(1) rotate(0deg);
}
}
/**/
@-moz-keyframes blurFadeInOut{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
-moz-transform: scale(0);
}
}
@-moz-keyframes blurFadeIn{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
-moz-transform: scale(1.3);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
-moz-transform: scale(1);
}
}
@-moz-keyframes fadeInRotate{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
-moz-transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
-moz-transform: scale(1) rotate(0deg);
}
}
/**/
@keyframes blurFadeInOut{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
20%,75%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
100%{
opacity: 0;
text-shadow: 0px 0px 50px #fff;
transform: scale(0);
}
}
@keyframes blurFadeIn{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
text-shadow: 0px 0px 40px #fff;
transform: scale(1.3);
}
50%{
opacity: 0.5;
text-shadow: 0px 0px 10px #fff;
transform: scale(1.1);
}
100%{
opacity: 1;
text-shadow: 0px 0px 1px #fff;
transform: scale(1);
}
}
@keyframes fadeInRotate{/* By Johanes Dj - http://Djogzs.blogspot.com*/
0%{
opacity: 0;
transform: scale(0) rotate(360deg);
}
100%{
opacity: 1;
transform: scale(1) rotate(0deg);
}
}

Setelah itu copy paste HTML dibawah kode </head>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != "static_page"'>
<style type='text/css'>
.sp-container {display:block}
</style>
</b:if></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='sp-container'>
<div class='sp-content'>
<h2 class='frame-1'>Loading</h2>
<h2 class='frame-2'>3</h2>
<h2 class='frame-3'>2</h2>
<h2 class='frame-4'>1</h2>
<h2 class='frame-5'>
<span>Welcome </span>
<span>To </span>
<span>My blog</span>
</h2>
<a class='sp-link' href='#'>http://shinobu-oshino-blogger-template.blogspot.com</a>
<a class='sp-circle-link' href='#'>Open</a>
</div>
</div></b:if>

terakhir,copy paste JQUERY di atas kode </head>

Atau...

copy paste di atas kode </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>
<script src='https://sites.google.com/site/djogzs/js/jquery.easing.1.3.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$curtainopen = false;
$(".sp-circle-link").click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({bottom: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".sp-container").stop().animate({top:'-2200px'}, 2000 );
$curtainopen = true;
}else{
$(this).stop().animate({bottom: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'});
$(".sp-container").stop().animate({top:'-2200px'}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
</b:if>

Untuk mengganti Url blog pada splash screenya,kamu cukup mengganti url blog ini.
http://shinobu-oshino-blogger-template.blogspot.com
*buka blogger=>template=>edit HTML

Backlinks

URL

Code For Forum

HTML Code

<a href='https://orochimaru-id.blogspot.com/2012/05/splash-effects-dengan-css3-dan-curtain.html' target='_blank'>Splash Effects dengan CSS3 dan Curtain opening dengan Jquery</a>

Anda Sekarang Sedang Baca Artikel Tentang Splash Effects dengan CSS3 dan Curtain opening dengan Jquery , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Splash Effects dengan CSS3 dan Curtain opening dengan Jquery ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Splash Effects dengan CSS3 dan Curtain opening dengan Jquery Sumbernya. Thank's

Rule For Leave A Comment

Hargai artikel ini dengan meninggalkan jejak berupa saran/komentar. Jejak anda akan membuat Author lebih bersemangat lagi untuk membuat artikel menarik lainnya, tapi sebelum kalian meninggalkan jejak kalian harus ikuti peraturannya :

1. Dilarang SPAM.

2. Berkomentarlah sesuai TOPIK.

3. Komentar yang keluar dari TOPIK akan Author DELETE.

4. Dilarang berkomentar yang berbau unsur SARA,PO*NO dan MENGHINA.

banner

Like Cuy

Splash Effects dengan CSS3 dan Curtain opening dengan Jquery

Site info

Label

Postingan Populer

Mengenai Saya

Site Info

My Banner