html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<header class="header _anim-item">
<div class="container">
<div class="header__inner">
<div class="header__logo">
<img src="img/logo.svg" alt="">
</div>
<div class="header__nav">
<a href="#" class="nav__link">Start</a>
<a href="#" class="nav__link">Contact</a>
<a href="#" class="nav__link">Our History</a>
</div>
<div class="header__btn">
<a href="#" class="btn">Book now</a>
</div>
</div>
</div>
</header>
</body>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body
{
}
.header {
position: fixed;
z-index: 2;
background-color: #52503B;
width: 100%;
height: 65px;
}
.header__inner {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.header__logo img {
width: 128px;
height: 45px;
}
.nav__link {
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// offset
function offset(el) {
const rect = el.getBoundingClientRect(),
scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
scrollTop = window.pageYOffset || document.documentElement.scrollTop;
return {top: rect.top + scrollTop, left: rect.left + scrollLeft};
}
// animation
const animItems = document.querySelectorAll('._anim-item');
if (animItems.length > 0) {
window.addEventListener('scroll', animOnScroll);
function animOnScroll() {
for (let i of animItems) {
const animItem = animItems[i];
const animItemHeight = animItem.offsetHeight;
const animItemOffset = offset(animItem).top;
const animStart = 4;
let animItemPoint = window.innerHeight - animItemHeight / animStart;
if ((pageYOffset > animItemOffset - animItemPoint) && (pageYOffset < animItemOffset + animItemHeight)) {
animItem.classList.add('active');
} else {
animItem.classList.remove('active');
}
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run