Animações de Scroll em React

Adicionando pequenos detalhes que fazem diferença!

As animações de scroll permite que seus componentes apareçam na página enquanto você desliza para baixo. Este artigo mostra como fazer isso com React e CSS3!

Exemplo de uma animação de scroll

Para este exemplo, teremos um componente App, Header e About.

Primeiro, vamos criar o nosso componente Header.

***src/Header/index.js***
-----------------------
import React from 'react';
import './styles.css';

Adicionar alguns estilos:

***src/Header/styles.css***
-------------------------
.header {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}

Irado! O componente Header está pronto! Vamos para o próximo, que será o componente App:

***src/App/index.js***
--------------------
import React, { Component } from 'react';
import Header from '../Header';

O nosso componente App está apenas renderizando nosso componente Header. Abaixo do Header, criaremos o componente About que contém um texto. O texto será deslocado a partir da esquerda quando nos deslizarmos para área abaixo deste componente.

Há algumas coisas que precisamos fazer para que isso aconteça:

  • Nosso estado precisa manter o nome da classe da imagem e do texto do componente About
  • Se o usuário percorrer uma certa quantidade de pixels, defina o estado para outro nome de classe.
  • Criar uma função que manipule a ação de scroll
***src/App/index.js***
--------------------
import React, { Component } from 'react';
import Header from '../Header';

Se você não tem certeza de quantos pixels depois você quer que ele apareça, verifique utilizando:

console.log(document.documentElement.scrollTop);

Toda vez que nos realizarmos o scroll, a função handleScroll é invocada. No entanto, apenas se tivéssemos percorrido 430 pixels, a função handleScroll definirá o estado como show, ao invés de hide.

Vamos criar o componente About.

***src/About/index.js***
-----------------------
import React, { Component } from 'react';
import './styles.css';

Se o usuário não percorrer 430 pixels, o nome da classe da div que contém o texto será hide. Uma vez que o usuário percorreu 430 pixels, o className será show. Isso é importante uma vez que chegamos ao CSS. Mas primeiro, vamos importar o componente About no componente da nossa aplicação.

***src/App/index.js***
--------------------
import React, { Component } from 'react';
import About from '../About';
import Header from '../Header';

E adicionar alguns estilos para About:

***src/About/styles.css***
------------------------
.about-wrapper {
height: 30em;
width: 100vw;
}

E PRONTO!!1 🚀 🎉

Ahoooy! E não é que funciona?

Agora, ao deslizar pela página, o texto será mostrado a partir da esquerda. Ainda não adicionei nenhum estilo aos componentes, por isso não parece muito bom, mas a funcionalidade está lá!

Se você deseja que eles apareçam da direita, parte superior ou inferior, basta alterar os próximos valores:

.show {
left/right/top/bottom: -30em
}

Créditos

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store