post

Animação Fade com Scroll da Pagina usando CSS + JS

Publicado em: 03/05/2023 / Atualizado em: 05/05/2023

Categorias: BlogCSSJavaScript (JS)JS

Esse código permite que você crie uma animação em qualquer conteúdo HTML onde o efeito “fade” suave é aplicado para mostrar o conteúdo que fica escondido por padrão assim que você “rola” (scroll) a pagina.

Alem disso, esse código permite que o efeito se repita caso o usuário suba a pagina e desça novamente.

<div>
  <h1 class="uianimated delay-200">Esse titulo vem depois de 2 segundos!</h1>
  <p class="uianimated delay-400">Esse texto vem depois de 4 segundos!</p>
</div>

<style>
.uianimated { /* top */
  position: relative;
  transform: translateY(60px);
  opacity: 0;
  transition: all 1.2s ease;
}
	
.uianimated.bottom {
  transform: translateY(-60px);
}
	
.uianimated.left {
  transform: translateY(0px);
  transform: translateX(60px);
}
	
.uianimated.right {
  transform: translateY(0px);
  transform: translateX(-60px);
}
	
.uianimated.active {
  transform: translateY(0px);
  transform: translateX(0px);
  opacity: 1;
}
	
.uianimated.active.delay-100 {
    -webkit-transition-delay: 100ms;
    -moz-transition-delay: 100ms;
    -o-transition-delay: 100ms;
    transition-delay: 100ms;
}
	
.uianimated.active.delay-200 {
    -webkit-transition-delay: 200ms;
    -moz-transition-delay: 200ms;
    -o-transition-delay: 200ms;
    transition-delay: 200ms;
}

.uianimated.active.delay-300 {
    -webkit-transition-delay: 300ms;
    -moz-transition-delay: 300ms;
    -o-transition-delay: 300ms;
    transition-delay: 300ms;
}
	
.uianimated.active.delay-400 {
    -webkit-transition-delay: 400ms;
    -moz-transition-delay: 400ms;
    -o-transition-delay: 400ms;
    transition-delay: 400ms;
}

.uianimated.active.delay-500 {
    -webkit-transition-delay: 500ms;
    -moz-transition-delay: 500ms;
    -o-transition-delay: 500ms;
    transition-delay: 500ms;
}
	
.uianimated.active.delay-600 {
    -webkit-transition-delay: 600ms;
    -moz-transition-delay: 600ms;
    -o-transition-delay: 600ms;
    transition-delay: 600ms;
}
	
.uianimated.active.delay-700 {
    -webkit-transition-delay: 700ms;
    -moz-transition-delay: 700ms;
    -o-transition-delay: 700ms;
    transition-delay: 700ms;
}
	
.uianimated.active.delay-800 {
    -webkit-transition-delay: 800ms;
    -moz-transition-delay: 800ms;
    -o-transition-delay: 800ms;
    transition-delay: 800ms;
}
	
.uianimated.active.delay-900 {
    -webkit-transition-delay: 900ms;
    -moz-transition-delay: 900ms;
    -o-transition-delay: 900ms;
    transition-delay: 900ms;
}
	
.uianimated.active.delay-1000 {
    -webkit-transition-delay: 1000ms;
    -moz-transition-delay: 1000ms;
    -o-transition-delay: 1000ms;
    transition-delay: 1000ms;
}
</style>

<script>
function uianimated() {
  var uianimateds = document.querySelectorAll('.uianimated');

  for (var i = 0; i < uianimateds.length; i++) {
    var windowheight = window.innerHeight;
    var uianimatedtop = uianimateds[i].getBoundingClientRect().top;
    var uianimatedpoint = 40;

    if (uianimatedtop < windowheight - uianimatedpoint) {
      uianimateds[i].classList.add('active');
    } else {
      uianimateds[i].classList.remove('active');
    }
  }
}

function onPageload() {
  uianimated();
  window.addEventListener('scroll', uianimated);
}

window.addEventListener('load', onPageload);
</script>

Veja a animação funcionando em tempo real aqui: https://animacao-fade-com-scroll-da-pagina-usando-css-js.brunoalbim.repl.co

Publicações recomendadas:


Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News


Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/2770

ID de Referência: 2770

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato