0

Estou trabalhando em um projeto em Vue e preciso que quando o usuário rolar a página e chegar em uma especificada div, seja adicionado um efeito ou uma classe nessa div, semelhante ao ScrollReveal

Alguém já precisou fazer algo semelhante no Vue?

Segue o código css do que eu possuo e que preciso que seja executado ao chegar em div

O efeito do título em h2 deve ser executado quando ele é exibido na tela.

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

h1 {
  animation: 1s ease-out 0s 1 slideInFromLeft;
}

h2 {
  animation: 1s ease-out 0s 1 slideInFromLeft;
}
<h1>
Hello World!
</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<h2>
World Hello!
</h2>

1 Resposta 1

-3

Você precisa usar Javascript para detectar a localização do elemento na tela e ativar a animação css quando ele estiver visível.

A seguir um passo a passo no qual você pode se basear para conseguir o resultado que você quer.

1. Crie o elemento HTML que você que verificar se está na tela (no seu caso o h2).

2. Carregue os arquivos jQuery JS e JQuery Viewport Checker.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="viewportchecker.js"></script>

3. Chame o plugin no seu h2

<script>
$(document).ready(function(){
  $('h2').viewportChecker({
  //Classe que irá adicionar a animação ou estilo quando o item aparecer na tela
  classToAdd: 'exemploDeClasse',

  // O offset dos elementos, permite que eles apareçam mais cedo ou mais tarde
  offset: 100,

  // Adiciona a possibilidade de remover a classe quando o elemento não está visível
  repeat: false,

  // Retorno de chamada para fazer depois que uma classe foi adicionada a um elemento. A ação retornará "add" ou "remove", dependendo se a classe foi adicionada ou removida.
  callbackFunction: function(elem, action){}
  });
});
</script>

Espero que ajude em algum sentido.

Aconselho colocar alguma classe ou id nesse h2 para que fique mais facil identifica-lo.

Abraço.

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 .