Tutorial: Efeito For shares


Hey, como disse nos posts anteriores eu estou me esforçando para postar aqui no blog, procurando coisas novas, assuntos diversos para poder compartilhar coisas diferentes pra todos vocês, mas antes de começar o tuto como vocês estão? Espero que estejam muito bem, e ah, eu estou bem também (ninguém perguntou)

Quando encontrei esse efeito "For shares" achei ele bem diferenciados de muitos efeitos por ai, ele dá um super destaque quando passa o mouse em cima da imagem, sinceramente recomendo a usar nos autores ou coisa do tipo, mas acho que nos afiliados também ficaria legal, se você gosta de coisa chamativa.

Sim, eu sei que sempre encho o post de blá blá blá, mas é que só postar o tuto não é tão legal assim concordam? Não? Okay, chega de falar então e vamos ao que interessa, ficou curioso para saber como é o efeito? Clique em "Leia Mais" e confira o efeito.




Diferente não? Vamos ao tuto.

Procure por "]]></b:skin>" após ter encontrado cole o código abaixo acima

.qitem{
width:110px;
height:110px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUJ7QwBuBmMJN0pGo9FxAy5A44cKX5XEUNa7IYboR94-3wqchdNuFDiyy9ZvUnyX5E3POP7-NwfjOWwQoSVC0ZompEyGsuLZQ4V-pDLjfoPeUky0Gktyxy0p6cdel89H0xv2I0IDQovZjO/s1600/af.png') no-repeat;
overflow:hidden;
cursor:pointer;
position:relative;
margin:10px;
display: inline-block;
}
.qitem img{
border:0;
position:absolute;
z-index:200;
}
.qitem .caption{
position:absolute;
z-index:0;
display: block;
}
.qitem .caption h4{
font-size:8px;
padding:25px 15px 15px 15px;
vertical-align: middle; margin: 0;
}
.qitem .caption p{
padding:3px 5px 0 8px;margin:0;
}
.topLeft,.topRight, .bottomLeft, .bottomRight{
position:absolute;
background-repeat:no-repeat;
float:left;
}
.topLeft{
background-position:top left;
}
.topRight{
background-position:top right;
}
.bottomLeft{
background-position:bottom left;
}
.bottomRight{
background-position:bottom right;
}
.clear{
clear:both;
}


Após ter feito isso, visualize, caso tudo esteja normal, salve.  Agora, vá em layout > adicionar gadget > HTML/Javascript e cole o código abaixo:

<script src="http://static.tumblr.com/rozpbz7/6CSm6yab0/fourshares.js"></script>
<script src="http://static.tumblr.com/rozpbz7/3NEm6yacj/fourshares2.js"></script>
<script>
$(document).ready(function() {
//Custom settings
var style_in = 'easeOutBounce';
var style_out = 'jswing';
var speed_in = 1000;
var speed_out = 300;
//Calculation for corners
var neg = Math.round($('.qitem').width() / 2) * (-1);
var pos = neg * (-1);
var out = pos * 2;
$('.qitem').each(function () {
url = $(this).find('a').attr('href');
img = $(this).find('img').attr('src');
alt = $(this).find('img').attr('img');
$('img', this).remove();
$(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');
$(this).children('div').css('background-image','url('+ img + ')');
$(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});
$(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});
$(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});
$(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});
}).hover(function () {
$(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});
},
function () {
$(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
$(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});
}).click (function () {
window.location = $(this).find('a').attr('href');
});
});
</script>
<div class="qitem">
<a href="SEU LINK"><img src="LINK DA IMAGEM PRINCIPAL" alt="Test 1" width="91" height="72"/></a><span class="caption"></span>
</div>

Eu sei que o código é grande, mas é uma boa ter um efeito diferenciado... Bom, espero que tenham gostado do post e antes que eu me esqueça. Créditos: aqui.

8 comentários:

  1. Você só pode ser vidente *0*
    Faz anos, desde que eu tive experiencia com HTML que eu estou procurando esse tutorial *u*
    Obrigado (:
    abraço ;]

    ResponderExcluir
    Respostas
    1. Obaaa! Fico feliz que o tutorial tenha sido útil *---*

      Obrigado pela visita :3

      abraços.

      Excluir
  2. Muito bom o tuto, gostei !
    cr4zy-world.blogspot.com.br

    ResponderExcluir
  3. Oie, é a minha primeira vez aqui. Adorei conhecer. Vc pode conhecer o meu blog?
    www.rosachiclets.com.br

    Se gostar, siga-me que eu retribuirei.
    Bjs - Suzana Rosa

    ResponderExcluir
    Respostas
    1. Oii, fico feliz que tenha gostado :)) Posso sim, pode deixar :)

      Obrigado pela visita ♥

      Excluir
  4. Amei os tutoriais de efeitos nas fotos!!!
    Bjus

    http://blogluminoso.blogspot.com.br/

    ResponderExcluir

- Obrigado pela visita e pelo comentário, não se esqueça de deixar o link do seu blog abaixo para que eu possa retribuir sua visita.

-Se for para criticar que seja logado, em anônimo sua opinião não valerá de nada.

 
Design e programação: Carol Mascarenhas
Confissões de um garoto - 2011 / 2015. Todos os direitos reservados Tecnologia do Blogger