0

no link abaixo,

http://ub.universidadedabiblia.com.br/curso-bacharel-em-teologia/?ref=U2479268R&hsrc=R0N1cnNv

à medida em que se vai rolando a tela, observa-se que as div's vão recebendo efeito de transição. Mas o efeito só ocorre quando a rolagem chega na div. Antes, ele fica esperando.

Como fazer esse efeito apenas quando a div aparecer na tela?

Eu até consigo o efeito, mas se a div está lá para baixo, o efeito ocorre e quando eu rolo a tela, ao chegar na div, o efeito já ocorreu!

0

1 Resposta 1

1

Você pode usar o plugin scrollReveal para resolver seu problema.
Ele é bem simples de usar e tem uma documentação completa.

Ficaria mais ou menos assim:

       // JavaScript
window.sr = ScrollReveal();
sr.reveal('.foo');
sr.reveal('.bar');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/scrollreveal.js/3.2.0/scrollreveal.min.js"></script>
<div class="foo"> <h1>Títilo</h1> </div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="bar"> <h2>Subtítulo</h2> </div>

Espero ter ajudado.

4
  • Estranho, aqui funciona, mas na minha página não funciona. Importei o JQuery e o ScroolReveal nessa ordem para o head, coloquei as div's no body, e adicionei o js do plugin e não funciona! 19/07/2016 às 19:35
  • A ordem correta tem que ser essa: 1º Jquery | 2º scrollreveal | 3º Código HTML | 4º Função que chamad o scrollreveal. 19/07/2016 às 19:38
  • Note que o bloco de código JS tem que ficar depois do html 19/07/2016 às 19:39
  • Espero ter ajudado. 20/07/2016 às 12:24

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .