28 de mar de 2013

26

Tutorial - Efeito Cortina - Quem Escreve...

6134_large
Oie! Eu tava com vontade de trazer mais um tutorial do lay do DN aqui pra vocês, aí eu percebi que os efeitos estão acabando :O fiquei tipo #QUEFAÇODEPOIS?
Aí rapidamente me veio a solução: vou trocar o lay e encher de efeitos novos, haha²
Mas isso vai demorar um pouco ainda, vou fazendo um pouco de cada vez porque eu tô com dó de tirar ele... Enquanto isso vou aproveitando ele mais um pouco... :D
Hoje vim ensinar pra vocês como faz aquele efeito cortininha ali do nosso "Quem escreve".. Tem as fotinhas minha e do Mah *o*
Como todos os efeitos aqui do blog, eu peguei o código lá do Chá com Anjos, faço meus lays baseado todinho naquele blog que é super completo *o* Vamos lá?
- Crie um gadget java/script e cole o seguinte código:

<script src="http://static.tumblr.com/b1gnlwd/OX1m3bgeu/jquery-1.3.1.min.js"></script>
<script src="http://static.tumblr.com/b1gnlwd/Gndm3bgdn/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function() {
    //Custom settings
 var style_in = 'easeOutBounce';
 var style_out = 'jswing';
 var speed_in = 800;
 var speed_out = 300;
 //Top and bottom
 var top = $('.qitem').height() * (-1);
 var bottom = $('.qitem').height();
 $('.qitem').each(function () {
  //retrieve all the details of the image before removing it
  url = $(this).find('a').attr('href');
  img = $(this).find('img').attr('src');
  alt = $(this).find('img').attr('img');
  width = $(this).width() / 4;
  height = $(this).height();
    //remove the image and append 4 div into it
  $('img', this).remove();
  $(this).append('<div class="bar1"></div><div class="bar2"></div><div class="bar3"></div><div class="bar4"></div>');
    //set the image as background image to all the bars
  $(this).children('div').css('background-image','url('+ img + ')');
  //Divide the image into 4 bars and rebuild the image
  $(this).find('div.bar1').css({bottom:0, left:0, width:width, height:height, backgroundPosition:'0 0' });   $(this).find('div.bar2').css({top:0, left:width, width:width, height:height, backgroundPosition:(width*-1) + 'px 0' });   $(this).find('div.bar3').css({top:0, left:width*2, width:width, height:height, backgroundPosition:(width*-2) + 'px 0' });   $(this).find('div.bar4').css({bottom:0, left:width*3, width:width , height:height, backgroundPosition:(width*-3) + 'px 0' });
 }).hover(function () {
    //Move those bar, 1st and 3rd move upward, 2nd and 4th move downward
  $(this).find('div.bar1').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});   $(this).find('div.bar2').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});   $(this).find('div.bar3').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});   $(this).find('div.bar4').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});      },
  function () {
  //Back to default position
  $(this).find('div.bar1').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});   $(this).find('div.bar2').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});   $(this).find('div.bar3').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});   $(this).find('div.bar4').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});   }).click (function () {
    //make the whole box clickable
  window.location = $(this).find('a').attr('href');  });
});
</script>
 - Abra o HTML do seu blog, procure por /b:skin e cole acima:

.qitem {
     width:93px;     height:93px;
     border:4px solid #222; 
     margin:2px 0px 2px 4px;
     background: url('http://static.tumblr.com/b1gnlwd/D6gm3btai/bg.gif') no-repeat;
     overflow:hidden;
     position:relative;
     float:left;
     cursor:hand; cursor:pointer;}
.qitem img {
     border:0;
     position:absolute;
     z-index:200;}
.qitem .caption {
     position:absolute;
     z-index:0;
     color:#ccc;
     display:block;
     width: 93px;     text-align: center;
     margin-top: 23px;}
.qitem .caption h4 {
     font-size:12px;
     padding:10px 5px 0 8px;
     margin:0;
     color:#ff4d4d;}
.qitem .caption p {
     font-size:10px;
     padding:3px 5px 0 8px;
     margin:0;}
.bar1, .bar2, .bar3, .bar4 {
     position:absolute;
     background-repeat: no-repeat;
     z-index:200;}
.clear {
     clear:both;}

Mude apenas o que está em negrito, a menos que entenda bem os códigos:
  • Nos dois primeiros itens em negrito, ajuste o tamanho da imagem.
  • No terceiro, mude a largura e a cor da borda das fotos.
  • No quarto mude o fundo de quando você passa o mouse.
  • No quinto coloque a mesma largura do primeiro item.
  • No sexto mude a cor do texto da foto ao passar o mouse. 
Use o seguinte código para aplicar o efeito:
<div class="qitem">
    <a href="LINK DE REDIRECIONAMENTO" target="_blank"><img src="URL DA IMAGEM" alt="Test 1" title="" width="94" height="94"/></a>
    <span class="caption"><h4>PALAVRA DESEJADA</h4><p>SUBTITULO DESEJADO</p></span>
</div>
  • No primeiro item em negrito, coloque o link que você quer redirecionar.
  • No segundo, a URL da sua imagem.
  • No terceiro e no quarto, as dimensões da imagem (elas devem ser 1 pixel maior que as dimensões do código anterior).
  • No quinto item a palavra em destaque (a que está de vermelho no exemplo).
  • No último um subtítulo. 
Espero que tenha sido útil, qualquer coisa é só perguntar... Beijos beijos lindos e lindas ^^

26 comentários:

  1. Uau ainda não conhecia esse efeito,muito legal ^.^

    www.em-teusbracos.blogspot.com

    ResponderExcluir
  2. gostei desse efeito, ainda não conhecia :)
    Beijos
    http://umaxicaradebeleza.blogspot.com/

    ResponderExcluir
  3. Nao conhecia tb, deve ficar mto legal.

    bjs
    http://blogvidinhaminha.blogspot.com.br

    ResponderExcluir
  4. Não conhecia esse efeito. Bjus!

    galerafashion.blogspot.com.br

    ResponderExcluir
  5. nhaim, adoreiii o tuto *---*
    E realmente foi muito estressante, masss é a vida, tem que seguir em frente, logo terá outras oportunidades!! Muito obrigada!!
    Bejo beijo, se cuida!!

    http://www.delicadinhah.com.br/

    ResponderExcluir
  6. Tutorial bom hein? Bem simples. Eu não usarei, HAHAHA, mas quem gosta desse efeito, deve usar e abusar EHUEHUEHUEH, lindo post <3 Beijos ;*

    Ewerton Lenildo - @Papeldeumlivro
    papeldeumlivro.blogspot.com

    ResponderExcluir
  7. Ainnn, eu não sei colocar...
    Bjs - Suzana Rosa - www.rosachiclets.com.br

    ResponderExcluir
  8. Adorei o tuto, deve ficar lindo ♥
    Beijinhos
    Facebook do blog
    conversando-com-a-lua.blogspot.com.br

    ResponderExcluir
  9. Legal vou tentar usar kkkk
    Bjs
    re4ding.blogspot.com

    ResponderExcluir
  10. Adorei o tutorial!
    Beijos
    Rizia - Livroterapias
    http://livroterapias.blogspot.com.br/

    ResponderExcluir
  11. Não conhecia esse efeito, achei muito lindo! Salvei o tutorial e vou usar se eu precisar algum dia. Achei uma gracinha *-*
    Beijos,
    depoisdeveneza.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Ah, fico feliz em saber que você gostou ;)

      Excluir
  12. Que legal, adorei o tutorial!
    www.espacegirl.com

    ResponderExcluir
  13. adorei o tutorial;;; salvei aqui a dica
    bju

    http://aieuvivantagem.blogspot.com.br/

    ResponderExcluir

Olá! Sinta-se à vontade para comentar :P
- Todos os comentários serão aceitos. Mas lembre-se: Palavrões, chingamentos, comentários como "Seguindo, segue de volta?" deixam feia a sua própria imagem,
- Temos páginas explicando nosso sistema de parceria, afiliação e divulgação e também alguns de nossos conteúdos. Não deixe de olhar!
- Qualquer assunto mais sério nos envie um email que está na página "contato"
- Deixe o link de seu blog para que possamos retribuir ^^

Beijos e Volte Sempre ^^