Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Apulko

[Resolvido] Como trazer efeito Jquery pra frente?

Por , em Javascript

Recommended Posts

Apulko    3

Apulko
Postado

Quero colocar este efeito no meu site

 

http://premiumcoding.com/jquery/falling-leaves/Leaf3Example/

 

http://premiumcoding.com/freebie-jquery-falling-leaves/

 

 

É fácil, funciona beleza, só que as folhas ficam caindo atras das DIV's que compõe o layout.

 

Já tentei coloca o efeito dentro de outra div e ordena-las com css z-index e mesmo assim fica caindo atrás.

 

Alguém sabe como solucionar esse problema?

 

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

mostre como você implementou no teu site.

 

e um link para ele. Certamente você deverá ajustar com z-index.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apulko    3

Apulko
Postado

Já tentei com z-index, porém continua caindo atrás das div's que compõe o fundo.

 

As div que compõe o fundo estão no modo absolute, fixed e relative. Entre elas funciona normalmente o Z-INDEX

 

Porém na DIV que está o efeito não funciona.

 

O script está depois do body:

 

 

<body style="overflow:hidden">


   <!--Começa folhas caindo--> 
   <div class="folhas">
       <div  class="leaves"></div>
<script type="text/javascript"> 
			fallingLeaves();
           </script>
           </div>
   <!--termina folhas caindo-->

Compartilhar este post

Link para o post
Compartilhar em outros sites

dinhografo    0

dinhografo
Postado

Cara eu baixei o plugin/efeito e simplesmente adicionai uma div com textos e uma imagem grande e as folhas cairam perfeitamente pela frente da div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> leaves</title>
<style>
body {
   top:0px;
background:#1E1E20 url(images/autumn.jpg) center top no-repeat;
color:#1E1E20;
font-size:13px;
}
img {border:none;}
div img {border:none;}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/animation-fix.js" type="text/javascript"></script>
<script src="js/jquery-css-transform.js" type="text/javascript"></script>
<script src="js/jquery-animate-css-rotate-scale.js" type="text/javascript"></script>
<script src="js/rotate3Di-0.9.js" type="text/javascript"></script>
<script type="text/javascript" src="js/leaves_falling.js"></script>
</head>
<body>
<div  class="leaves"></div>
   <script type="text/javascript"> 
	fallingLeaves();
</script>
<div id="teste">
 <h1 style="color: #0099FF">Titulo que ficará atraz do efeito</h1>
 <p>um texto qualquer que ficará atraz do efeito de folhas caindo</p>
 <img src="../../../../apache2triad/htdocs/gospelnorte2/images/banners/bannerprefeitura.jpg" alt="" width="890" /></div>
</body>
</html>

Talvez você esteja tendo algum tipo de conflito com outro plugin.

Percebi aqui no meu console que o document.write da linha 57 do 'leaves_falling.js' dá um errozinho mas nada de muito grave.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apulko    3

Apulko
Postado

Bom dia;

 

Eliminei todos os demais pluguins, porém ainda está caindo por traz.

 

Também fiz o teste colocando uma imagem direto no html e a folha caiu por cima, como meu layout está pegando a imagem pelo CSS, creio que deva estar aí o conflito... entre css e jquey.

 

Estou no caminho ou estou falando besteria? haha

 

Obg.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Logan Martinelli    0

Logan Martinelli
Postado

Esses tipos de problemas são sempre os mais fáceis de resolver.

 

Como se comportão os elementos, qual seus níveis de hierarquia;

 

Este tipo de hierarquia pode ocorrer em páginas que não foram desenvolvidas com uma marcação pensando nisso.

 

Nesses tipos de páginas pode ocorrer de até:

 

Divs que estão no começo com "z-index:98797979;" ficaram por baixo de divs que estão no final da página com "z-index:0;"

 

Hierarquia:

 

Divs com position fixed;

Divs com position absolute;

Divs com display:block;

Divs com display:inline-block;

Divs com position relative;

 

Siga o nível Hierarquico e escreva para quem está por cima um css de nível Hierarquico;

Compartilhar este post

Link para o post
Compartilhar em outros sites

Apulko    3

Apulko
Postado

Demorei mas estou aqui....

 

Fui conferir nos códigos do js do pluguin e vi que tinha uma linha com códigos do css dentro do jquery, então coloquei lá z-index:3 e o pluguin foi para frente.

 

 

Como achei curioso o fato de ter CSS dentro do jquery, fica aí a dica caso alguém precise.

 

 

Obrigado a todos e pode marcar aqui como resolvido.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito