post
Efeito Fade Up com delay suave pelo Scroll via CSS e JS
Publicado em: 31/03/2023
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.