30 de dez de 2012

Efeito cortina

Olá anjos!

Essa semana vou trazer alguns tutoriais do Tumblr para vocês. O primeiro é o efeito cortina, que eu aprendi no Tumblr Single Themes! Esse efeito é muito legal e fica ótimo se usado para postadores, quando você passa o mouse em cima de uma imagem ela se divide liberando uma pequena descrição, e se clicar ela redireciona para um link. 
Veja um exemplo aqui.


1-Vá no HTML do seu blog e procure por </head>. Acima cole:

<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>

*Se o código não funcionar coloque em um Gadget de HTML/JavaScript

2-Procure por /b:skin e acima, cole:


.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.

3-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.



3 comentários:

  1. Gostei! Quando eu tiver postadores, vou usar esse efeito. Muito bem explicado!

    Bjoos!

    ResponderExcluir
    Respostas
    1. Também vou usar se tiver postadoras ^^

      Excluir
    2. Heey Marina, eu sei que vc não abriu vagas para postadoras, mas, bom, eu queria saber se eu posso ser postadora daqui do Chá com Anjos. Tudo bem se não quiser.

      Excluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!