0

Observem essa página:

https://www.nubank.com.br/gerando-boletos/

Ela tem a seguinte estrutura:

<p>titulo do post</p>
<img src>

<p>titulo do post</p>
<img src>

<p>titulo do post</p>
<img src>

Mas o que estou querendo saber é como fazer o efeito de aparecer aos poucos que ocorre nas imagens APENAS quando rolamos a página e então chegamos na imagem.

Devo pesquisar por oque?

Segundo a resposta de um colega abaixo, tentei da forma abaixo e não funcionou.

A figura apenas aparece. Confirmei a lnkagem dos arquivos

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />



<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="jquery.lazyload.js"></script>


<p>Titulo.</p>
<img class="lazy" src="payment_swipe.png">

<script>
  $(function() {

      $("img.lazy").lazyload({
         effect : "fadeIn"
      })


  });
</script>
6
  • O atributo src você substitui por data-original na imagem. Commented 2/02/2017 às 12:19
  • <img class="lazy" data-original="payment_swipe.png">, a imagem apareceu normalmente mas o efeito não ocorreu Commented 2/02/2017 às 12:23
  • Acho que consegui, peguei as ultimas versões do JQuery e do Plugin e deu certo. Só que o fadein está ocorrendo rápido demais. Tem como diminui essa velocidade? Commented 2/02/2017 às 12:52
  • só adicionar effectspeed: 900 nos parâmetros do método... Commented 2/02/2017 às 12:56
  • E ai, deu certo? Commented 2/02/2017 às 13:27

1 Resposta 1

1

Ou você utiliza algum Javascript desenvolvido para fazer esse efeito ou você utiliza algum plugin pronto, sugiro o Lazy Load:

<script src="jquery.js"></script> <!-- jQuery necessário -->
<script src="jquery.lazyload.js"></script>

<p>titulo do post</p>
<img class="lazy"  data-original="img/example.jpg">

<p>titulo do post</p>
<img class="lazy"  data-original="img/example.jpg">

<p>titulo do post</p>
<img class="lazy"  data-original="img/example.jpg">

<script>
    $(function(){
        $("img.lazy").lazyload();
    });
</script>

Em geral esse é o mais utilizado, você pode posteriormente customizar os efeitos e tudo mais, ai vai da sua necessidade e disponibilidade.

1
  • Então, tentei dessa forma mas não funcionou. Poderia colocar alguma coisa on-line desse tipo fazendo favor? Coloquei na pergunta como tentei. Talvez tenha feito errado! Commented 2/02/2017 às 12:17

Você deve fazer log-in para responder a esta pergunta.

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