Início
phpBB3 
PunBB
Invision
Forumeiros (Avançado)
5 Efeito adipoli para as imagenes do foro
Este script o que haras é mostrar efeito especiais a seus imagenes
--> Tutoriais, dicas e astúcias <--
5 Efeito adipoli para as imagenes do foro
5 Efeito adipoli para as imagenes do foro
1º - Instalar script
têm várias opções se queres cola-o no índice para visualizar teu imagenes q pões em teu foros, tambien tem a opcion de pôr em todas as paginas para q se visualizen nos subforo ou temas..
- Código:
$(document).ready(function() {
$.getScript('http://img86.xooimage.com/files/7/1/7/jquery.adipoli.min-36f4b36.js',function(){
$('.efectoadipoli').adipoli({'startEffect' :'overlay', 'hoverEffect' : 'foldLeft'});
$('.efectoadipoli1').adipoli({'startEffect' :'overlay', 'hoverEffect' : 'sliceDown'});
$('.efectoadipoli2').adipoli({'startEffect' :'normal', 'hoverEffect' : 'popout'});
$('.efectoadipoli3').adipoli({'startEffect' :'transparent', 'hoverEffect' : 'boxRandom'});
$('.efectoadipoli4').adipoli({'startEffect' :'transparent', 'hoverEffect' : 'boxRainGrowReverse'});
});
});
- Código:
.adipoli-wrapper
{
margin:auto;
position:relative;
display: inline-block;
}
.adipoli-wrapper>img
{
position: absolute;
z-index: 1;
}
.adipoli-before
{
position: absolute;
z-index: 5;
}
.adipoli-after
{
position: absolute;
z-index: 10;
}
.adipoli-slice {
display:block;
position:absolute;
z-index:15;
height:100%;
}
.adipoli-box
{
display:block;
position:absolute;
z-index:15;
}
põe em qualquer parte que aceite html
esta é a forma correcta de pôr tua imagem com a funcion do efeito
- Código:
<img class="efectoadipoli" src="URL IMAGEN" border="0" alt="">
<img class="efectoadipoli1" src="URL IMAGEN" border="0" alt="">
<img class="efectoadipoli2" src="URL IMAGEN" border="0" alt="">
<img class="efectoadipoli3" src="URL IMAGEN" border="0" alt="">
<img class="efectoadipoli4" src="URL IMAGEN" border="0" alt="">
efectoadipoli0
efectoadipoli1
efectoadipoli2
efectoadipoli3
efectoadipoli4
4º - Resultado
DEMO
Última edição por genau em Qua 02 Out 2013, 10:41 pm, editado 5 vez(es)
