Meu Deus do céu, QUE VIDEO TOPPPP. agora meu site vai ser muito mais confortavel FINALMENTE tiger vc é o cara kkkk por favor, faz uma live codando um site simples responsivo com agente....POR FAVOR kkkkkkk # melhordomundo
Venho do futuro para dizer q o Safari 15.4 já está compatível. Mas valeu pela aula, sempre bom ver o quanto o JavaScript é poderoso na manipulação da DOM.
Função para fazer scroll da página suavemente: function scrollSmoothly(finalPositionY, scrollOffset=40) { let currentScrollY = window.pageYOffset if (currentScrollY < finalPositionY) { requestAnimationFrame(() => { currentScrollY += currentScrollY + scrollOffset > finalPositionY ? finalPositionY - currentScrollY : scrollOffset scrollTo(0, currentScrollY) scrollSmoothly(finalPositionY) }) } else if (currentScrollY > finalPositionY) { requestAnimationFrame(() => { currentScrollY -= currentScrollY - scrollOffset < finalPositionY ? currentScrollY - finalPositionY : scrollOffset scrollTo(0, currentScrollY) scrollSmoothly(finalPositionY) }) } } Esse método de cima possui um suporte muito maior do que utilizando a proprieade behaviour da função scrollTo ou do que a propriedade scroll-behaviour do CSS. Ele também é bem mais legível e tem mais performance do que usar setInterval Explicando o código: Basicamente, você passa como primeiro parâmetro a posição Y de destino da página e como segundo parâmetro a taxa de scroll (quanto maior for esse valor, menos suave é a transição). Após isso, o código verifica se a sua posição atual é menor ou maior do que a posição de destino. Então, agora entra a parte do requestAnimationFrame, que, como o nome sugere, é ideal para fazer animações. Nesse caso, eu estou invocando ele e também estou invocando a própria função scrollSmoothly, pois esse é o único jeito de fazer com que o código seja repetido constantemente. Se não fosse isso seria necessário usar setInterval, que não é uma boa. O requestAnimationFrame ou vai executar o código uma vez por cada frame ou apenas quando a main thread do JavaScript não estiver ocupada/lotada.
No vídeo esse método serviu apenas para prevenir o padrão do navegador de pular de modo seco para a seção e colocar uma ID na URL. O problema deve estar ligado provavelmente à outra linha do seu código, por favor baixe o código-fonte completo na descrição a fim de comparar para encontrar erros
quando eu vi o codigo achei engraçado, ele manda em um determinado tempo uma parte em pixel pra ir pra baixo ate chegar no pixel total "genios" hahahaha
@@TigerCodes obg, pelo feedback. Percebi que a importação do Js tinha que está lá no final da página para funcionar. Eu estava colocando dentro do Head e não está funcionando.
Sim, este tutorial tornou-se obsoleto agora que a propriedade scroll-behavior do CSS funciona no Safari. Algo que ainda é útil dele, porém, é que com JavaScript você consegue controlar a exata velocidade do scroll.
Obrigado, amigo.
Você mostrou EXATAMENTE o que eu queria saber em 33s segundos de vídeo.
Nunca fiquei tão satisfeito no TH-cam.
Meu Deus do céu, QUE VIDEO TOPPPP.
agora meu site vai ser muito mais confortavel FINALMENTE
tiger vc é o cara kkkk
por favor, faz uma live codando um site simples responsivo com agente....POR FAVOR kkkkkkk
# melhordomundo
Rapaz... que shoow !! DIDÁTICA EXCELENTE . ESSE TIGER É MESTRE !! SUCESSO
Obrigado Fabio! 💙🐅
Cai de paraquedas aqui, e só pela qualidade do conteudo ganhou um inscrito e um fã haahah
Obrigado!!
que explicação didática! simplesmente perfeito. ganhou mais um escrito
Obrigado pelo elogio e pela inscrição 💙🐅
Estava em busca dessa solução citada logo no começo "scroll-padding-top" OBRIGADO!!!
Fico feliz que encontrou algo que procurava :)
Venho do futuro para dizer q o Safari 15.4 já está compatível. Mas valeu pela aula, sempre bom ver o quanto o JavaScript é poderoso na manipulação da DOM.
Disponha, viajante do tempo!!
O que é DOM
Simplesmente fantástica sua metodologia de ensino, parabéns 🤜🤛
Fico feliz que você gostou, Maria
foda demais! continue! estou vendo todos os seus videos e recomendando para parceiros e amigos, simplesmente parabéns!
Obrigado pela força, Felipe! Tem mais vídeo vindo aí
Muito bom, estava quebrando a cabeça com isso... +1 inscrito!
Obrigado! 😉
Muito bem feito o vídeo, ótima qualidade mano, boss dms
Valeu, Wally 🐯
Parabéns pelo vídeo! Tem uma ótima didática.
Obrigado! 💙
Show, muito bom, para quem tá iniciando ou necessitando utilizar scrolling é muito bom!
Ótimo vídeo, quero aprender mais técnicas no front-end, já que sou iniciante na área. Obrigado pelo vídeo valeu!
Obrigado, Paulo!
Parabéns, Ótima Aula. Obrigado.
Obrigado! :)
Show mano, ficou top
Valeu!
Muito boa a didática mano!!!!! Muito bom mesmo!!!!
Muito obrigado 😁
essa dica para adicionar uma margin-top ao rolar foi foda. parabens
Fico feliz que a dica te ajudou, Vitor. 🐅
brabo dms!!
Valeu!!
O brabo
😎
Muito bom seus vídeo! Mercearia mais visualização!
Muito obrigado, compartilhe com os amigos! 😁
Função para fazer scroll da página suavemente:
function scrollSmoothly(finalPositionY, scrollOffset=40) {
let currentScrollY = window.pageYOffset
if (currentScrollY < finalPositionY) {
requestAnimationFrame(() => {
currentScrollY += currentScrollY + scrollOffset > finalPositionY ? finalPositionY - currentScrollY : scrollOffset
scrollTo(0, currentScrollY)
scrollSmoothly(finalPositionY)
})
}
else if (currentScrollY > finalPositionY) {
requestAnimationFrame(() => {
currentScrollY -= currentScrollY - scrollOffset < finalPositionY ? currentScrollY - finalPositionY : scrollOffset
scrollTo(0, currentScrollY)
scrollSmoothly(finalPositionY)
})
}
}
Esse método de cima possui um suporte muito maior do que utilizando a proprieade behaviour da função scrollTo ou do que a propriedade scroll-behaviour do CSS. Ele também é bem mais legível e tem mais performance do que usar setInterval
Explicando o código:
Basicamente, você passa como primeiro parâmetro a posição Y de destino da página e como segundo parâmetro a taxa de scroll (quanto maior for esse valor, menos suave é a transição).
Após isso, o código verifica se a sua posição atual é menor ou maior do que a posição de destino. Então, agora entra a parte do requestAnimationFrame, que, como o nome sugere, é ideal para fazer animações. Nesse caso, eu estou invocando ele e também estou invocando a própria função scrollSmoothly, pois esse é o único jeito de fazer com que o código seja repetido constantemente. Se não fosse isso seria necessário usar setInterval, que não é uma boa.
O requestAnimationFrame ou vai executar o código uma vez por cada frame ou apenas quando a main thread do JavaScript não estiver ocupada/lotada.
👏🏼👏🏼👏🏼
Obrigado 😉
Sou iniciante nesse mundo, e seu vídeo me ajudou muito! Para incrementar esse código js em meu site, preciso colocar créditos para você nele?
Coloque apenas se quiser, o uso do código é livre. E fico feliz que te ajudou, Larissa. 🐅
Qual é o link do github ?
Quando eu uso o event.preventDefault(); meus links param de funcionar quando são clicados....
No vídeo esse método serviu apenas para prevenir o padrão do navegador de pular de modo seco para a seção e colocar uma ID na URL. O problema deve estar ligado provavelmente à outra linha do seu código, por favor baixe o código-fonte completo na descrição a fim de comparar para encontrar erros
amo-te
valeuu!
quando eu vi o codigo achei engraçado, ele manda em um determinado tempo uma parte em pixel pra ir pra baixo ate chegar no pixel total "genios" hahahaha
Nunca vou entender pq vc parou de ensinar ! T.T
o meu não esta pegando os links, poderia me ajuda?
Você pode dar mais detalhes? Se for de ajuda, baixe o código que está na descrição e compare com o seu para tentar achar o erro.
@@TigerCodes obg, pelo feedback. Percebi que a importação do Js tinha que está lá no final da página para funcionar. Eu estava colocando dentro do Head e não está funcionando.
no meu n funciona de jeito nenhum.. ate copiei e colei seu codigo la no github :/
Qual erro que está mostrando?
@@TigerCodes o meu está dando erro no tempo de rolagem, estou tentando rever o código
herói
Rapaz fiquei até tentado a comprar o curso de vc6.
Obrigado pelo apoio, Nelson! Se quiser se inscrever não esqueça de usar o cupom na descrição :) Manda um inbox no Insta se precisar de ajuda.
Safari só complica pro nosso lado ksksksksksk
Agora já é compatível (finalmente) 🎉
@@TigerCodes sss, eu já estou até usando num site de cliente aqui ksksksksk fiquei mó feliz q não vou precisar fazer aql trabalho td ksksksks
Mais facil adicionar scrool-behavior:smooth;
Sim, este tutorial tornou-se obsoleto agora que a propriedade scroll-behavior do CSS funciona no Safari. Algo que ainda é útil dele, porém, é que com JavaScript você consegue controlar a exata velocidade do scroll.
Muito rápido,simplesmente não entendi nada.