Skip to content

Latest commit

 

History

History
36 lines (31 loc) · 2.39 KB

Animacoes.md

File metadata and controls

36 lines (31 loc) · 2.39 KB
Raw

Animações🤹🏼‍♀️

Todas as configurações de animações se encontram no arquivo assets/js/ScrollReveal.js, padronizamos as animações para que todos possam usar o mesmo padrão, separamos em 3, sendo de 1 o mais rápido e 3 o mais lento.

Um breve review da estrutura da animação com ScrollReveal:

ScrollReveal().reveal('aqui vai a classe ou id (classe ex: .left id: #left', {origin: 'de onde vem (left right top bottom)', distance: 'controla a distância que os elementos se movem quando revelados.', duration: a duração do efeito, delay: e o delay de quando se passar em "cima" });

Animações do Header:

Por conta de querermos uma melhor experiência para o usuário decidimos criar as animações do Header Separada das demais, visto que seriam "lentas" demais para o usuário ver, causando uma falsa impressão que estaria travando.

ScrollReveal().reveal('.scroll-header-left-1', {origin: 'left', distance: '40px', duration: 1000, delay: 0});
ScrollReveal().reveal('.scroll-header-left-2', {origin: 'left', distance: '40px', duration: 1000, delay: 150});
ScrollReveal().reveal('.scroll-header-left-3', {origin: 'left', distance: '40px', duration: 1000, delay: 300});
ScrollReveal().reveal('.scroll-header-right-1', {origin: 'right', distance: '40px', duration: 1000, delay: 150});

Animações vindo da esquerda:

ScrollReveal().reveal('.scroll-left-1', {origin: 'left', distance: '40px', duration: 1000, delay: 500 });
ScrollReveal().reveal('.scroll-left-2', {origin: 'left', distance: '40px', duration: 1000, delay: 800 });
ScrollReveal().reveal('.scroll-left-3', {origin: 'left', distance: '40px', duration: 1000, delay: 1000 });

Animaçães vindo da direta:

ScrollReveal().reveal('.scroll-right-1', {origin: 'right', distance: '40px', duration: 1000, delay: 500 });

Animações vindo de baixo:

ScrollReveal().reveal('.scroll-bottom-1', {origin: 'bottom', distance: '40px', duration: 1000, delay: 500 });
ScrollReveal().reveal('.scroll-bottom-2', {origin: 'bottom', distance: '40px', duration: 1000, delay: 800 });
ScrollReveal().reveal('.scroll-bottom-3', {origin: 'bottom', distance: '40px', duration: 1000, delay: 1000 });