sexta-feira, 30 de novembro de 2012

Tutorial - Efeito Door

Bom dia leitoras! Aproveitando o feriado né? KKK'
Pois então, eu estava visitando uns tumblrs de html até que eu encontrei um efeito muito fofo para quem quiser usar em gadgets de "Postadoras" "Divulgação" e aonde vocês quiserem! O efeito foi encontrado no HTMLuv! E ele se chama Efeito Door. É um efeito no qual você passa o mouse e parece que uma porta se abre e aparece uma descrição. Live Preview.
Ele é melhor visualizado no Mozilla Firefox.
Chega de enrolação! Vamos ver o tutorial?

1º)  Vá em Modelo > Editar HTML > e pesquise por "</head>"

2º) Cole isto acima de </head>
<script src="http://static.tumblr.com/rozpbz7/nFim53lu5/jquery.js"></script>
<script src="http://static.tumblr.com/rozpbz7/tcom53lvc/easing.js"></script>

<script type='text/javascript'>
$(document).ready(function() {
        $('.box_containere').hover(function(){
                        var width = $(this).outerWidth() / 2;
                        $(this).find('.left').animate({ right : width },{queue:false,duration:300});
            $(this).find('.right').animate({ left : width },{queue:false,duration:300});
        }, function(){
            $(this).find('.left').animate({ right : 0 },{queue:false,duration:300});
            $(this).find('.right').animate({ left : 0 },{queue:false,duration:300});
        });
        
        $('.box_container3').hover(function(){
            
            var width = $(this).outerWidth() / 2;
            
            $(this).find('.left3').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:800});
            $(this).find('.right3').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:800});
        }, function(){
            
            $(this).find('.left3').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:800});
            $(this).find('.right3').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:800});
            
        });
             
  });
</script>
Não mexam neste código!!!

3º) Aperte CTRL+F e pesquise por "]]></b:skin> e cole isto acima 

.box_container3{position:relative;width:LARGURA DA IMGpx;height:TAMANHO DA IMGpx;overflow:hidden;   background: url(http://static.tumblr.com/wdf0zke/aKfmbzusw/bg.png) no-repeat;color:white;font-family:'pixel';font-size:8px;text-transform:uppercase;text-align:center;display:inline-block;border:2px solid #851e2f;}
.box_container3 a{color:#fff;}
.images_holder3{position:absolute;}
.image_div3 {position:relative;overflow:hidden;width:50%;float:left;}    .right3 img{margin-left: -100%;z-index:50px;}
@font-face {font-family: Pixel;src: url('http://static.tumblr.com/rmj06l2/kcLlo1q2y/pf_ronda_seven.ttf');}
Entendendo o código:
  1. Para mudar o background, do efeito quando abre, troca o background do .box_container3.
  2. Não mude mais nada. Pode danificar o efeito.
  3. Caso quiser trocar á borda, mude este código:
    border:2px solid #851e2f;
    pela cor desejada. 
     
     
     4º) Cole isto em um gadget de HTML/Javascript:
    <div class='box_container3'>
    <a href="LINK">
    <div class='images_holder3'>
    <div class='image_div3 left3'><img src='URL DA IMG'/></div>
    <div class='image_div3 right3'><img src='URL DA IMG'/></div>
    </div><div style="clear:both"></div>
    <br><br>Descrição</a>
    </div> 
     
    
    
    Por enquanto é isso! Espero que tenham gostado! 
    Comentem e mandem pedidos pela ask por favor :3
    Beijos e até mais!

9 comentários:

  1. Oi, Rô, amei o efeito, estou usando, com seus creditos, óbviamente.

    ResponderExcluir
    Respostas
    1. Oii Leeh *u* Que bom que gostou! Bom proveito e obrigada *u*

      Bjs ^-^

      Excluir
  2. Oi Adorei o Tuto queria te perguntar se você quer ser postadora la do princesa com colete? tchau abraços

    ResponderExcluir
    Respostas
    1. Oiii obrigada Aninha <3 Awwn eu mal estou postando aqui e seria muito difícil postar lá também >< Mas enfim, obrigada pela proposta *u*

      Bjs ^___^

      Excluir
  3. Que lindo amor, eu nunca tinha visto... Seus gadgtes estão com problemas amor, está lá embaixo e não na lateral D=

    ResponderExcluir
    Respostas
    1. Obrigadaa *u* muito fofo né? :3 É... eu sei :\ No google chrome ele fica assim ;_; Quando visita ele com o Firefox fica certinho *-*

      Bjs ^-^

      Excluir
  4. Oi! Aceita afiliação?

    - beijos;
    Hyun;
    me-ilumine.blogspot

    ResponderExcluir

- Comente a vontade, eu retribuo ^3^
- Palavras de baixo calão, xingamentos e outros tipos de ofensas não são permitidos. Para quê tanto ódio no coraçãozinho, gente? c: