728x90
반응형
⭐ Navbar color change animation
Navbar 높이만큼 스크롤 했을 때 투명한 Navbar의 색이 변하는 애니메이션
See the Pen oNYzoPp by Eunji Jeon (@emcjrl) on CodePen.
<Html>
<nav id="navbar">
<div class="navbar__logo">
<a href="#">E U N J I</a>
</div>
<ul class="navbar__menu">
<li class="navbar__menu__item">Home</li>
<li class="navbar__menu__item">About</li>
<li class="navbar__menu__item">Skills</li>
<li class="navbar__menu__item">Work</li>
<li class="navbar__menu__item">Contact</li>
</ul>
</nav>
<section id="home"></section>
<CSS>
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
color: #ffffff;
}
button {
background-color: transparent;
cursor: pointer;
border: none;
outline: none;
}
/* Navbar */
#navbar {
position: fixed;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background-color: transparent;
transition: all 300ms ease-in-out;
}
#navbar.navbar--dark {
background-color: #4d4d4d;
}
.navbar__logo {
font-size: 15px;
font-weight: 500;
color: #ffffff;
text-decoration: none;
}
.navbar__menu {
display: flex;
margin: 0;
padding-left: 0;
}
.navbar__menu__item {
font-size: 12px;
letter-spacing: 0.07em;
padding: 4px 8px;
margin: 0 4px;
color: #ffffff;
cursor: pointer;
list-style: none;
}
.navbar__menu__item:hover {
background-color: #616161;
border-radius: 4px;
}
/* Home */
#home {
background: linear-gradient(#616161, powderblue);
height: 200vh;
}
<JavaScript>
const navbar = document.querySelector('#navbar');
const navbarHeignt = navbar.getBoundingClientRect().height;
document.addEventListener('scroll', () => {
if(window.scrollY > navbarHeignt) {
navbar.classList.add('navbar--dark');
} else {
navbar.classList.remove('navbar--dark');
}
});728x90
반응형
'Web design' 카테고리의 다른 글
| [Navbar] 햄버거 메뉴 애니메이션2 - Html, CSS, JS (0) | 2021.02.06 |
|---|---|
| [Navbar] 햄버거 메뉴 애니메이션1 - Html, CSS, JS (0) | 2021.02.06 |
| [Navbar] Change Menu Color - Html, CSS, JS (0) | 2021.01.29 |
| [Navbar] Sliding Menu Indicator - Html, CSS, JS (0) | 2021.01.29 |
