post

Efeito Fade Up com delay suave pelo Scroll via CSS e JS

Publicado em: 31/03/2023 / Atualizado em: 31/03/2023

Categorias: BlogCSSJavaScript (JS)JS

Se você está procurando uma maneira de melhorar a experiência do usuário no seu site, o efeito Fade Up com delay suave pelo Scroll pode ser uma ótima opção. Combinando técnicas de CSS e JavaScript, esse efeito cria uma transição suave entre as seções do seu site, tornando a navegação mais agradável e intuitiva.

Neste post, vamos explorar em detalhes como implementar o efeito Fade Up com delay suave pelo Scroll em seu site, com dicas práticas e exemplos de código.

Abaixo segue todo o código que precisa para criar o efeito:

<!-- Seção de exemplo -->
<section>
  <div class="container">
    <h3 class="uianimated">Title</h3>
    <p class="uianimated delay-300">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p class="uianimated delay-600">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</section>

<!-- CSS MOTION EFFECT -->
<style>
.uianimated {
  position: relative;
  transform: translateY(60px);
  opacity: 0;
  transition: all 1s ease;
}

.uianimated.active {
  transform: translateY(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;
}
</style>

<!-- JS MOTION EFFECT -->
<script>
	window.addEventListener('scroll', uianimated);

	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');
			}
		}
	}
</script>

Caso queira um exemplo real, você pode acessar pelo link: https://efeito-fade-up-com-delay-suave-pelo-scroll-via-css-e-js.brunoalbim.repl.co/

Ver todo o código que esta rodando no exemplo: https://replit.com/@brunoalbim/Efeito-Fade-Up-com-delay-suave-pelo-Scroll-via-CSS-e-JS

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/2670

ID de Referência: 2670

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


Comentários