post

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

Publicado em: 31/03/2023

Categorias: BlogCSSJavaScriptJS

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


Link de 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 para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários