Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 4
Sexo: Masculino

Mouse com efeito de transição(Shake)

28-05-2013 09:56

Olá, bom dia amigos.
Estou com uma dúvida enorme e não consigo fazer. Gostária de pedir se alguém sabe como pode me ajudar.
Tenho que fazer exatamente um script (css e talvez em java)desse site.
http://blacknegative.com/#!/bullittagency/

O efeito e da 4 página, aonde você passa o mouse sobre a tela e aparece a imagem de fundo com um delay, e quando mais vc passa o mouse mais vai aparecendo a imagem de fundo.
Preciso saber como se faz esse tipo de efeito, se tem algum semelhante, preciso disso com urgência. Alguém pode me ajudar por favor.

Desde já. Obrigado!
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Mouse com efeito de transição(Shake)

28-05-2013 11:38

Acessei o link, mas fica carregando constantemente e não sai disso.
0
A melhor hospedagem para o seu site HostGator!
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Mouse com efeito de transição(Shake)

28-05-2013 12:59

Carregou o link. Esse script seria um mouse tail, já que a imagem segue o cursor.

Um simples exemplo usando o jQuery seria

$(document).ready(function(){   $(document).mousemove(function(e){       $('#figura').offset({left:e.pageX,top:e.pageY+20});       }); });

Onde você irá adicionar o id figura a sua imagem, para que ela siga o cursor.

Você pode procurar no google por Trailing Mouse Cursor Effect jQuery ou Trailing Mouse Cursor Effect MooTools

Um exemplo bem parecido http://davidwalsh.name/demo/mouse-trailer.php
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 4
Sexo: Masculino

Mouse com efeito de transição(Shake)

28-05-2013 14:31

E mas o meu maior problema e fazer quando mouse passar em cima da imagem e aparecer a que esta no fundo.
Tipo um efeito hover .
Como faço isso?
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Mouse com efeito de transição(Shake)

28-05-2013 15:16

Tem como mandar um print desse efeito que está falando?
0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 4
Sexo: Masculino

Mouse com efeito de transição(Shake)

28-05-2013 15:30

http://www.netupload.org/files/0e3hfrxer5wzffurkerp.jpg

Isso ai, quando você começa a passar o mouse sobre a tela, ele mostra a imagem atras. E esse tipo de efeito que to precisando criar,
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Mouse com efeito de transição(Shake)

28-05-2013 15:35

Veja se esse exemplo ajuda

<script src="jquery.js"></script>   <script> $(document).ready(function(){   $('.t').mouseover(function() { $(this).css('background-color','#000'); });   $('.t').mouseout(function() { $(this).css('background-color','#fff'); });   }); </script>


<table border="1"> <tr> <td class="t" style="width:100px; height:100px;">A</td> <td class="t" style="width:100px; height:100px;">B</td> <td class="t" style="width:100px; height:100px;">C</td> <td class="t" style="width:100px; height:100px;">D</td> </tr> <tr> <td class="t" style="width:100px; height:100px;">E</td> <td class="t" style="width:100px; height:100px;">F</td> <td class="t" style="width:100px; height:100px;">G</td> <td class="t" style="width:100px; height:100px;">H</td> </tr> </table>

0
A melhor hospedagem para o seu site HostGator!
 
Primeiras postagens
Primeiras postagens
Tópico Autor
Mensagens: 4
Sexo: Masculino

Mouse com efeito de transição(Shake)

28-05-2013 15:57

No caso, estou ainda com uma dúvida, o fundo tem que fica preto, e quando eu passar o mouse, aparecer cada quadrado uma parte da imagem.

Tipo

Fundo preto e em baixo
tem a imagem.

Quando passa a o mouse vai revelando um quadrado da imagem.
Como acontece no site.
0
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17523
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Mouse com efeito de transição(Shake)

28-05-2013 16:18

Para fazer do 0, acho bem complicado. O melhor é você procurar na net com as palavras chaves que indiquei.
0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado