Animação com scroll, usando Javascript puro.

Animando com o evento scroll.

Ter uma pagina animada torna o site visualmente mais divertido, e dependendo do seu objetivo pode otimizar o carregamento da pagina exibindo as imagens somente quando estiver encima dela.

Antes de iniciar o seu Javascript prepare o documento HTML criando um atributo "data" e uma class para criarmos o CSS.

<p data-anime="right" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore reprehenderit ipsa, cum minus ipsum ratione, voluptas maiores. Itaque tempore maxime autem, numquam laboriosam! Nam totam dicta, accusamus porro veniam, asperiores.</p>

Agora que temos um Tag HTML com um atributo "data", vamos fazer o codigo CSS.

[data-anime="right"] {
  opacity: 0;
  animation-name: Out-Height;
  transition: 1s;
  animation-duration: 1s;
  animation-fill-mode: both;
}

[data-anime="right"].animate {
  opacity: 1;
  animation-name: In-Height;
  transition: 1s;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes In-right {
  from {
    transform: translate3d(500px, 0, 0); }
  30% {
    transform: translate3d(0px, 0, 0); }
  50% {
    transform: translate3d(5px, 0, 0); }
  100% {
    transform: translate3d(2px, 0, 0); }
  to {
    transform: translate3d(0px, 0, 0); } }

 @keyframes Out-right {
  from {
    transform: translate3d(0px, 0, 0); }
  30% {
    transform: translate3d(2px, 0, 0); }
  50% {
    transform: translate3d(0px, 0, 0); }
  100% {
    transform: translate3d(0px, 0, 0); }
  to {

    transform: translate3d(500px, 0, 0); } }  

Atenção observe que a class " .animate " foi usada com o atributo criado, caso você queira criar outra animação mantenha a class " .animate ", porque ela será chamada no Javascript.

Com isso a animação está pronta, porem falta achar a posição do atributo "data".



Vamos criar o código Javascript.

Crie uma constante que pegue todos os atributos "data" mas para isso usaremos o querySelectorAll.

const target = document.querySelectorAll('[data-anime]');

Agora vamos criar uma função para pegar o valor de pageYOffset mais a altura da tela para iniciar a animação.

const animeScroll = ()=>{

let windowTop = window.pageYOffset + (window.innerHeight * 0.75 || document.body.clientHeight * 0.75 || document.documentElement.clientHeight * 0.75);

}

O código esta quase pronto, agora falta criar dentro da função, uma outra função com uma condição, para adicionar a class " .animate " ou remover.

const animeScroll = ()=>{

let windowTop = window.pageYOffset + (window.innerHeight * 0.75 || document.body.clientHeight * 0.75 || document.documentElement.clientHeight * 0.75);

//forEach() falar com cada elemento//

target.forEach(function(element){
(windowTop) > element.offsetTop 
? element.classList.add('animate') : element.classList.remove('animate')
})

}

Para finalizar falta criar o evento scroll para ativar a função

window.addEventListener('scroll', animeScroll);

Veja também com fazer isso no DIVI dentro do WORDPRESS.

https://www.youtube.com/watch?v=xu2jsfSFLmQ