3

Estou usando uma biblioteca de animação chamada Animate.css que pode ser vista clicando aqui.

Porém ao criar um efeito para uma determinada div o efeito é ativado mesmo que a div não esteja sendo visível na tela, ou seja, ainda é necessário rolar a página para que a ´div´ fique visível.

Segue o código jQuery que estou usando:

$('#galeria-fotos-home').addClass('animated bounceInUp');

Eu quero que o efeito seja ativado somente quando a ´div´ esteja sendo visível, como neste site. Note que ao rolar a página os efeitos vão aparecendo.

3 Respostas 3

3

O problema é que você está (provavelmente) adicionando a classe quando o DOM está pronto (i.e., $(document).ready()...), e isso que não quer dizer que o elemento está visível. Você pode criar um método que verifica a "visibilidade" de um elemento durante o scroll. Veja (retirado daqui):

function isScrolledIntoView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

e atrelá-lo ao scroll da seguinte forma

$(window).on('scroll', function(){
    if(isScrolledIntoView('.elemento')){
        console.log('elemento visivel');
    }
});

Perceba que essa aproximação é custosa, pois esse método vai rodar toda vez que ocorrer o evento scroll. Para vários elementos, você pode ter problemas de performance.

Outro ponto de atenção é que você pode adicionar apenas a classe .bounceIn, sem se preocupar com a .animated. Veja um exemplo mínimo:

function isScrolledIntoView(elem){
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).on('scroll', function(){
  if(isScrolledIntoView('.animated')){
    $('.animated').addClass('bounceIn');
  }
  else{
    $('.animated').removeClass('bounceIn');
  }
});
.dummy{
  padding: 1em;
  border: 1px solid black;
  width: 50%;
  margin: 0 auto;
}

.animated{
  margin: 1em auto;
  text-align: center;
  border: 1px solid red;
  padding: 1em;
  width: 30%;
}

.animated.bounceIn{
  animation-duration: .75s;
}

.bounceIn {
  animation-name: bounceIn;
}

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dummy">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus similique excepturi, incidunt doloribus cum! Atque pariatur nostrum autem quaerat quis libero velit eligendi eaque culpa deserunt neque molestias dolorum nobis ab possimus aperiam quam vero corporis, qui unde debitis ut facilis, consequatur, laboriosam! Accusamus neque debitis nemo, harum mollitia magnam ratione aliquid optio, quia tempore earum! Culpa, rem. Perferendis animi doloribus maiores maxime quos repellendus iste, ex architecto a vel placeat cum nesciunt aliquam similique! Sunt est obcaecati illo rerum qui, inventore at. Doloremque nam animi eveniet consequuntur soluta architecto! Quae deserunt quisquam, libero ex labore mollitia quibusdam maiores commodi quaerat odio quam magnam minima praesentium corporis molestiae sint esse laudantium fuga impedit autem id. Dolore iure ex iste ad praesentium quidem omnis minus saepe facere nesciunt dignissimos soluta hic suscipit molestias rerum ut veritatis itaque eum voluptatibus non, modi corporis, laudantium earum perspiciatis. Fuga sint mollitia sit deserunt ab porro maiores, laudantium quae obcaecati optio corporis aut quidem nisi blanditiis eius veritatis animi, hic fugiat exercitationem! Tempore aut, corporis facilis iure voluptatem eaque libero amet odit culpa, esse. Alias, harum, maiores! Error laborum nostrum earum aliquam architecto repudiandae magni voluptatibus iusto deserunt. Blanditiis saepe tempore totam repellendus voluptates veniam molestias quia beatae adipisci optio eligendi, quae quos inventore tempora ad harum vel, aspernatur minima eos iste recusandae. Iusto ipsum tenetur, fugit autem nesciunt unde doloribus eligendi voluptatem quam odit in quae reprehenderit cum deserunt provident. Quia tempore enim, maxime minus quisquam repellat hic ea fugit nostrum iusto adipisci temporibus vero natus, illo. Tempora itaque est praesentium eaque vel et quasi iste recusandae non aspernatur fugit soluta laboriosam nulla voluptas quidem esse error, hic numquam odio repudiandae nihil ipsa, atque dolorum quisquam? Minus perferendis consectetur accusantium veniam amet, in, nulla iste voluptatem, mollitia ipsum facere dolores. Provident repudiandae non assumenda nostrum nam velit qui, ex impedit illo expedita animi adipisci enim eius natus voluptatibus porro consectetur quis. Dignissimos, excepturi dolorum aut libero laudantium obcaecati nobis perspiciatis iure. Nobis dicta amet consequatur necessitatibus deserunt exercitationem ipsum vero error nulla, aliquid inventore voluptatum possimus omnis voluptatibus suscipit velit nam, perferendis quos asperiores quisquam voluptates ducimus consequuntur sed. Eveniet deleniti, reprehenderit aliquid animi! Mollitia debitis quidem, amet consequatur nemo laudantium voluptatum recusandae, necessitatibus dicta nam alias, itaque eum rerum. Iure illum, natus dolor explicabo quae nam consequatur cupiditate, soluta</div>

<div class="animated">See me bounce!</div>

Acredito que o seu problema possa ser resolvido assim. Mas, aproveitando o embalo, se você quer fazer animações baseadas em scroll, essa biblioteca é excelente.

5
  • esta biblioteca que me indicou seria uma opção melhor para integrar ao que quero? Pois meu interesse é utilizar cerca de 4 efeitos diferentes em cada página.
    – Wendell
    Commented 22/09/2016 às 14:10
  • Eu acredito que sim... ela já trata das animações e do scroll ao mesmo tempo, é bem simples de usar, e evita que você se perca caso adicione mais coisas Commented 22/09/2016 às 14:14
  • codepen.io/michalsnik/pen/WxvNvE uma pen com exemplo de funcionamento Commented 22/09/2016 às 14:21
  • gostei do exemplo, teria como eu adicionar data-aos="meuefeito" através de uma função jQuery?
    – Wendell
    Commented 22/09/2016 às 14:28
  • $('.el').attr('data-aos','meuefeito') ? Commented 22/09/2016 às 14:31
0

IE7 ou superior: https://stackoverflow.com/a/7557433/5628

function onVisibilityChange(el, callback) {
    var old_visible;
    return function () {
        var visible = isElementInViewport(el);
        if (visible != old_visible) {
            old_visible = visible;
            if (typeof callback == 'function') {
                callback();
            }
        }
    }
}

var handler = onVisibilityChange($('#galeria-fotos-home'), function() {

    $('#galeria-fotos-home').addClass('animated bounceInUp');

    //uma vez que já tenha sido iniciada a animação, vamos desativá-la
    $(window).on('DOMContentLoaded load resize scroll', function(){}); 

});


//jQuery
$(window).on('DOMContentLoaded load resize scroll', handler); 

Note que ficar monitorando o scroll da página traz uma camada de complexidade considerável para a sua aplicação, veja se vale mesmo a pena incorporar esse recurso. Se uma animação em loop der conta, melhor.

0

O que fazia era uma função que deteta-se se o utilizador esta a ver ou não a div...

Para saber o que que esta a ver o utilizador

var init = $(window).scrollTop();     
var end  = $(window).height()+$(window).scrollTop();
// o utilizador ve tudo que estiver entre o $init e o $end

Para saber a posição da div

var init = $('.div').offset().top
var end  = $('.div').offset().top+$('.div').height()

Espero ter me explicado bem ;)

Funções que vais precisar:

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 .