Popular Post

Popular Posts

Splash Effect !

Posted by : Unknown Minggu, 14 Oktober 2012




Splash Effects dengan CSS3 dan Curtain opening dengan Jquery.namanya panjang juga ya?ahh,karena ini adalah hasil experimen saya sendiri dengan menggabungkan dua trik yang fungsinya berbeda.
pertama Untuk text effect'a adalah trik lama yang saya dapat dari Splash & Coming Soon Page Effects with CSS3(Codrops)(hanya html dan css3) dan Tombol close serta work animasinya menggunakan Jquery animated Curtain

Seperti yang kalian tahu,Jquery animated itu fungsinya membuat tirai buka tutup pada halaman blog,tapi yang saya ambil hanya bagian tombol dan script yang sudah saya edit sendiri.

 Untuk menggunakan Trik ini,selalu back-up template kamu agar tidak terjadi sesuatu yang diinginkan,karena ada kemungkinan kamu akan menemui beberapa problem seperti:
-tombol open tidak dapat di klik.

Kenapa tidak bisa diklik?
Ada kemungkinan Jquery tidak aktif karena:
-ada jquery lain yang sama.
-ada js lain yang bentrok dengan jquery curtain.
-widget" external yang menggunakan Js.

Saya sendiri sebenarnya masih bingung,karena beberapa blog yang menggunakan template Shinobu oshino yang menggunakan JSplash effect ada yang tombolnya bisa di klik dan ada yang tidak.

Semula saya pikir itu karena masalah versi browser ataupun koneksi internet karena pemanggilan Jquery blum di load oleh browser.tapi setelah saya cek sendiri ternyata yang jadi masalah adalah jquery dibawah ini:



https://sites.google.com/site/djogzs/js/jquery.easing.1.3.js

Saya mengecek dengan developers tools goggle chrome dan ternyata di beberapa blog ada yang bisa dan ada yang tidak,jadi menurut saya coba kamu download jquery diatas,dan upload di hostingan kamu.


hmm,ok deh langsung saja yang mau coba~

buka blogger =>template=>edit HTML

lalu Copy paste CSS diatas kode ]]></b:skin>

Setelah itu copy paste HTML dibawah kode </head>
terakhir,copy paste JQUERY di atas kode </head>

Atau...

copy paste di atas kode </body>





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


CSS
.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;
}
}

@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);
}
}





HTML


<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>






Jquery

<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;
$(&quot;.sp-circle-link&quot;).click(function(){
$(this).blur();
if ($curtainopen == false){
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = true;
}else{
$(this).stop().animate({bottom: &#39;0px&#39; }, {queue:false, duration:350, easing:&#39;easeOutBounce&#39;});
$(&quot;.sp-container&quot;).stop().animate({top:&#39;-2200px&#39;}, 2000 );
$curtainopen = false;
}
return false;
});
});
</script>
</b:if>


sertakan Sumbernya bila anda mau mengcopy paste artikel ini. Splash Effects dengan CSS3 dan Curtain opening dengan Jquery

{ 1 komentar... read them below or add one }

  1. Hisyam16 Oktober 2012 pukul 02.26

    Bro kelambaten welcomenya !!!!
    gy mana caranya biar agak lebih cepat ?????

    BalasHapus

Navigation

Weekly most viewed

Diberdayakan oleh Blogger.

Total Pageviews

I just a kid who want to know about everything i can
And I wanna be a PROGRAMMER !

Followers

Labels

- Copyright © 2013 iFawwaz Blog - Devil Survivor 2 - Powered by Blogger - Designed by Johanes Djogan -