26/05/2013

TUTORIAL-EFEITO PUSH!

Boa tarde!
Estava meio sumido não é?
O motivo foi eu não ter nenhum comentário no meu post,por isso acho que quando os blogueiros fazem aqueles debates 'RIDÍCULOS' sobre a blogosfera estar toda igual é tudo da boca pra fora,pois quando eu tento postar algo variado não recebo nenhum comentário,e quando posto algum material recebo vários!!!!!!!
Agora saindo do meu chilique,hoje vim ensinar o EFEITO PUSH,que aprendi no Kawaii World, e acho SUPER LINDO!
Preview AQUI

1. Vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole o seguinte:

.puxa1 {background-image: URL(LINK DA SUA IMAGEM);width: LARGURApx;height: ALTURApx;display:inline-block;-webkit-transition:All 0.6s ease-in-out; -moz-transition:All 0.6s ease-in-out; -o-transition:All 0.6s ease-in-out;margin-right:1px;}.puxa1:hover{background-position: DESLOCAMENTOpx 0;-webkit-transition:All 0.9s ease-in-out; -moz-transition:All 0.9s ease-in-out; -o-transition:All 0.9s ease-in-out;}
Link da sua imagem - Coloque exatamente o que peço, mas fique atento ao tipo de efeito que quer. Se você desejar ter um efeito igual o tipo 1, a imagem vai ser normal. Se for do tipo 2, ela precisa estar lado a lado e se for do tipo 3 é necessário que esteja uma em cima da outra, veja abaixo, você pode inclusive copiar e usar como base:

Largura - No tipo 1 e no tipo 3, as larguras devem ser o número total, mas no tipo 2 é necessário que seja metade da imagem, para que aparece somente a primeira foto.

Altura - No tipo 1 e 2 deve ser o número total, mas no tipo 3 deve ser metade.

Deslocamento - Você escolhe, no tipo 1 e 2 o deslocamento vai ser o mesmo número da largura, mas você deve colocar um - na frente do número, pois ele deve ficar negativo. Você pode até duplicar o número para que a imagem role mais vezes. Já no tipo 3, você vai precisar fazer uma mudança:

background-position: DESLOCAMENTOpx 0;

 Troque por:

background-position: 0 DESLOCAMENTOpx;

É só isso, espero que tenham gostado do efeito e usem a criatividade, dá pra fazer muita coisa com ele. Até depois, pessoal ~ ♥ 


Edit:

Esqueci de dizer: Para usar é só colar o código abaixo em um gadget de HTML/JavaScript, editando a parte que indiquei.

<a href="seu link"><div class="puxa1"></div></a>

Fácil né? Se tiver gostado deixe sua opinião,e se não tiver gostado deixe também!

7 comentários:

  1. \o gomen não entrar! (blogger maltido que não avisa quando tem novos posts!)

    ResponderExcluir
  2. Já conhecia >3< eu já uso no meu blog ^^
    world--paradise.blogspot.com.br segue meu novo blog ?

    ResponderExcluir
  3. Adorei... Ga, se você estiver aí agora (16:32) entra no sempre mqtm? >u< quero falar sobre novidades e também sobre aquele negócio daquele blog lá.

    ResponderExcluir