scroll.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435
  1. let b = document.querySelector( `section` )
  2. b.setAttribute( `style`, `opacity:0;transition-duration:0.1s` )
  3. // Efeito scroll, rolagem da página, pega a barra na esquerda e muda ela para ficar fixa
  4. const Scroll = () => {// Arrow function `ES6`, calcula a posição para que mostre o efeito
  5. if(window.pageYOffset + ((window.innerHeight * 3) / 4) > b.offsetTop) {
  6. b.setAttribute( `style`, `opacity:1;transition-duration:2s` )
  7. }else{
  8. b.setAttribute( `style`, `opacity:0;transition-duration:2s` )
  9. }
  10. }
  11. // Ativa a nossa função
  12. setInterval(
  13. window.addEventListener( `scroll`, Scroll ),500
  14. )
  15. const sobre = () => {
  16. window.scroll({ // Função nativa dos browsers
  17. top: document.querySelector( `#conteudo` ).offsetTop, // Captura a quantidade precisa de px do elemento em cada tela diferente fiii
  18. left: 0,// Obrigatório, nao queremos movimentos horizontais
  19. behavior: 'smooth' // Unico efeito, dá a instrução ao browser que ele movaaaa uhuuull caraaai
  20. });
  21. }
  22. document.querySelector( `#to` ).addEventListener( `click`, sobre );
  23. // Função de rolagem suave
  24. const go = (elemento) => {// Arrow function levando um parâmetro que será um seletor como o de css
  25. let vivo = document.querySelector(elemento)// Pegará esse seletor e retornará um elemento vivo
  26. window.scroll({ // Função nativa dos browsers
  27. top: vivo.offsetTop, // Captura a quantidade precisa de px do elemento em cada tela diferente fiii
  28. left: 0,// Obrigatório, nao queremos movimentos horizontais
  29. behavior: 'smooth' // Unico efeito, dá a instrução ao browser que ele movaaaa uhuuull caraaai
  30. });// terminouuu fiii, só isso, c n vai precisar exporrtar mais 5000mil instruçoes de dados da porra do jquery
  31. }