Olá, gostaria de saber se há alguma transição que eu possa fazer em radial ou estilo de tinta dissolvendo (como se fosse tinta escorrendo)? Para esse efeito ficar mais legal para abrir o site.
Fiddle: http://jsfiddle.net/xos841uf/
$(document).ready(function () {
$('.fase_1').fadeIn(200);
$('.fase_2').delay(300).fadeIn(200);
$('.fase_3').delay(800).fadeIn(200);
})
#preload{position:fixed;width:100%;height:100%;z-index:50;overflow:hidden;}
#preload div{position:absolute;top:0;left:0;width:100%;height:100%;display:none;}
#preload div img{height:100%;width:100%;}
#preload{background-color: #2F2727;background-image: url(../images/bg_verde.jpg);background-position: center center;background-repeat: no-repeat;background-size:cover;background: -webkit-gradient(radial, center center, 0, center center, 460, from(#236a0f), to(#133e08));background: -webkit-radial-gradient(circle, #236a0f, #133e08);background: -moz-radial-gradient(circle, #236a0f, #133e08);background: -ms-radial-gradient(circle, #236a0f, #133e08);}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="preload">
<div class="fase_1">
<img src="http://www.matcha.provisorio.ws/images/fase_1.png" alt="Fase1" />
</div>
<div class="fase_2">
<img src="http://www.matcha.provisorio.ws/images/fase_2.png" alt="Fase1" />
</div>
<div class="fase_3">
<img src="http://www.matcha.provisorio.ws/images/fase_3.png" alt="Fase1" />
</div>
</div>