Criando limites dinâmicos de seção com JavaScript
Vložit
- čas přidán 6. 08. 2024
- Curso gratuito de programação WEB
↪discover.maykbrito.dev
Este vídeo ensina como implementar limites dinâmicos de sessão em programação web usando JavaScript. Você aprenderá a definir e controlar o topo e fundo de sessões, permitindo uma experiência de usuário mais fluída e interativa em seu site. Ideal para desenvolvedores web que desejam melhorar a organização e a funcionalidade de suas páginas utilizando técnicas avançadas de JavaScript.
- [00:00]( • Criando limites dinâmi... ) 📜 Um menu pode mudar automaticamente com base na seção visível durante o scroll da aplicação.
- [02:09]( • Criando limites dinâmi... ) 🎯 É possível marcar visualmente a seção atual de um site com uma classe específica usando JavaScript.
- [03:21]( • Criando limites dinâmi... ) 🛠️ Monitorar o scroll da janela é fundamental para ativar o menu com base na seção visível.
- [05:12]( • Criando limites dinâmi... ) 🖋️ Criar uma "linha alvo" virtual pode ajudar a determinar quando uma seção específica deve ser marcada como ativa no menu.
- [08:38]( • Criando limites dinâmi... ) 🧮 Usar offsetTop e offsetHeight ajuda a calcular precisamente a posição e tamanho das seções em relação ao scroll.
- [11:27]( • Criando limites dinâmi... ) 🛠️ A sessão termina quando o elemento passa da linha alvo definida.
- [12:49]( • Criando limites dinâmi... ) 🧩 Os limites da sessão são determinados pelo topo e fundo do elemento.
- [14:11]( • Criando limites dinâmi... ) 📊 Para encontrar o item de menu associado a uma sessão, use o ID da sessão como referência.
- [16:02]( • Criando limites dinâmi... ) 🧭 Cuidado ao usar seletores CSS para encontrar elementos com IDs dinâmicos.
- [17:12]( • Criando limites dinâmi... ) 📌 Sempre vincule corretamente os IDs de âncora no HTML para navegação interna.
Mais conteúdo?
↪ maykbrito.dev
Muito massa pensar de forma geométrica pra resolver esse tipo de problema
Qual é esse editor (estilo codepen) que você usa?
@@gustavodrifter fronteditor.dev é um editor de código leve que construí para dar aulas 🫶
Mayk como posso fazer aqueles scroll do wordpress que quando vai scrollando ele dar um scroll suave e quando para de scrollar ele vai parando devagar mesmo quando já solto. Eu achei legal essa suavidade mas não consigo replicar em JS.
@@welsonpaiva7204 esse vídeo aqui eu explico czcams.com/video/2GO_E3KMRVg/video.htmlsi=rsVHqNqKO1Togrin
@@maykbrito No caso era sem clicar, no scroll puro mesmo, eu vi alguns sites em wordpress que tem esse scroll, ele não deixa o usuário rolar com brutalidade, é bem suave no final. Acho que não sei explicar bem kkkkk