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.

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar