├── README.md ├── app.js ├── index.html ├── style.css └── tigercodes.svg /README.md: -------------------------------------------------------------------------------- 1 | # Scroll Suave com JavaScript 2 | 3 | Tutorial Javascript - Como Fazer um Scroll Suave. [Veja mais](https://www.youtube.com/watch?v=Mutjus8WI2w). 4 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const menuLinks = document.querySelectorAll('.menu a[href^="#"]'); 2 | 3 | function getDistanceFromTheTop(element) { 4 | const id = element.getAttribute("href"); 5 | return document.querySelector(id).offsetTop; 6 | } 7 | 8 | // function nativeScroll(distanceFromTheTop) { 9 | // window.scroll({ 10 | // top: distanceFromTheTop, 11 | // behavior: "smooth", 12 | // }); 13 | // } 14 | 15 | function scrollToSection(event) { 16 | event.preventDefault(); 17 | const distanceFromTheTop = getDistanceFromTheTop(event.target) - 90; 18 | smoothScrollTo(0, distanceFromTheTop); 19 | } 20 | 21 | menuLinks.forEach((link) => { 22 | link.addEventListener("click", scrollToSection); 23 | }); 24 | 25 | function smoothScrollTo(endX, endY, duration) { 26 | const startX = window.scrollX || window.pageXOffset; 27 | const startY = window.scrollY || window.pageYOffset; 28 | const distanceX = endX - startX; 29 | const distanceY = endY - startY; 30 | const startTime = new Date().getTime(); 31 | 32 | duration = typeof duration !== "undefined" ? duration : 400; 33 | 34 | const easeInOutQuart = (time, from, distance, duration) => { 35 | if ((time /= duration / 2) < 1) 36 | return (distance / 2) * time * time * time * time + from; 37 | return (-distance / 2) * ((time -= 2) * time * time * time - 2) + from; 38 | }; 39 | 40 | const timer = setInterval(() => { 41 | const time = new Date().getTime() - startTime; 42 | const newX = easeInOutQuart(time, startX, distanceX, duration); 43 | const newY = easeInOutQuart(time, startY, distanceY, duration); 44 | if (time >= duration) { 45 | clearInterval(timer); 46 | } 47 | window.scroll(newX, newY); 48 | }, 1000 / 60); 49 | } 50 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Scroll Suave 8 | 9 | 13 | 14 | 15 | 16 |

17 | 25 |

26 |

27 |

Tiger Codes

28 |

Olá, seja bem-vindo.

29 |

30 |

Sobre

31 |

32 | This human feeds me, i should be a god. Groom yourself 4 hours - 33 | checked, have your beauty sleep 18 hours - checked, be fabulous for 34 | the rest of the day - checked bite nose of your human for fall asleep 35 | upside-down or pushes butt to face or drink from the toilet, yet hack 36 | up furballs. Is good you understand your place in my world. Disappear 37 | for four days and return home with an expensive injury; bite the vet. 38 |

39 | Saiba mais 46 |

47 |

48 |

Cursos

49 |

50 | You are a captive audience while sitting on the toilet, pet me scoot 51 | butt on the rug but destroy house in 5 seconds get away from me stupid 52 | dog kitty poochy but munch on tasty moths. One of these days i'm going 53 | to get that red dot, just you wait and see instantly break out into 54 | full speed gallop across the house for no reason and use lap as chair. 55 |

56 | Saiba mais 63 |

64 |

65 |

Planos

66 |

67 | Lick face hiss at owner, pee a lot, and meow repeatedly scratch at 68 | fence purrrrrr eat muffins and poutine until owner comes back spread 69 | kitty litter all over house or proudly present butt to human. Lick 70 | sellotape please stop looking at your phone and pet me. Sniff all the 71 | things. Annoy the old grumpy cat, start a fight and then retreat to 72 | wash when i lose. 73 |

74 | Saiba mais 81 |

82 |

83 |

Contato

84 |

85 | So you're just gonna scroll by without saying meowdy? that box? i can 86 | fit in that box try to hold own back foot to clean it but foot 87 | reflexively kicks you in face, go into a rage and bite own foot, hard 88 | so i am the best so cat mojo yet the door is opening! how exciting oh, 89 | it's you, meh and my cat stared at me he was sipping his tea, too. 90 |

91 | Saiba mais 98 |

99 | © Tiger Codes 100 |

101 | 102 | 103 | 104 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | /* html { 8 | scroll-behavior: smooth; 9 | scroll-padding-top: 90px; 10 | } */ 11 | 12 | body { 13 | background: #0d0e0f; 14 | line-height: 1; 15 | font-family: "Roboto", sans-serif; 16 | display: grid; 17 | place-items: center; 18 | } 19 | 20 | header { 21 | position: fixed; 22 | top: 0; 23 | width: 100%; 24 | background: #222324; 25 | display: flex; 26 | justify-content: center; 27 | } 28 | 29 | section { 30 | margin-top: 7.5rem; 31 | } 32 | 33 | img { 34 | display: block; 35 | max-width: 100%; 36 | margin: 11.25rem auto 0 auto; 37 | } 38 | 39 | p { 40 | font-size: 1.125rem; 41 | line-height: 1.33333333333; 42 | color: #a1a1a6; 43 | margin-top: 1.25rem; 44 | max-width: 600px; 45 | padding-left: 1.75rem; 46 | } 47 | 48 | .menu ul { 49 | display: flex; 50 | list-style: none; 51 | } 52 | 53 | .menu li + li { 54 | margin-left: 5rem; 55 | } 56 | 57 | .menu a { 58 | display: inline-block; 59 | font-size: 1.125rem; 60 | line-height: 1.33333333333; 61 | color: #fff; 62 | text-decoration: none; 63 | padding: 1.125rem 0; 64 | } 65 | 66 | .menu a:hover { 67 | color: #4dc8ff; 68 | } 69 | 70 | .content { 71 | padding-right: 1rem; 72 | padding-left: 1rem; 73 | } 74 | 75 | .title { 76 | font-size: 4rem; 77 | line-height: 1.125; 78 | color: #f5f5f7; 79 | } 80 | 81 | .title span { 82 | color: #4dc8ff; 83 | } 84 | 85 | .title:first-child { 86 | padding-left: 1.25rem; 87 | border-left: 0.5rem solid #4dc8ff; 88 | } 89 | 90 | .link { 91 | font-size: 1.125rem; 92 | display: inline-block; 93 | text-decoration: none; 94 | color: #4dc8ff; 95 | margin-top: 1rem; 96 | margin-left: 1.75rem; 97 | } 98 | 99 | .link:hover { 100 | text-decoration: underline; 101 | } 102 | 103 | small { 104 | display: block; 105 | font-size: 1rem; 106 | line-height: 1.5; 107 | text-align: center; 108 | color: #a1a1a6; 109 | margin-top: 80vh; 110 | margin-bottom: 5rem; 111 | } 112 | 113 | @media (max-width: 1080px) { 114 | html { 115 | font-size: 93.75%; 116 | } 117 | } 118 | 119 | @media (max-width: 720px) { 120 | html { 121 | font-size: 87.5%; 122 | } 123 | } 124 | 125 | @media (max-width: 450px) { 126 | .menu li + li { 127 | margin-left: 2rem; 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /tigercodes.svg: -------------------------------------------------------------------------------- 1 | 10 | --------------------------------------------------------------------------------