Skip to content

Commit 802be0c

Browse files
ClJarvisClJarvis
committed
highlight link
1 parent 285be4f commit 802be0c

File tree

3 files changed

+172
-0
lines changed

3 files changed

+172
-0
lines changed

‎22Follow/index-FINISHED.html‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>👀👀👀Follow Along Nav</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<nav>
11+
<ul class="menu">
12+
<li><a href="">Home</a></li>
13+
<li><a href="">Order Status</a></li>
14+
<li><a href="">Tweets</a></li>
15+
<li><a href="">Read Our History</a></li>
16+
<li><a href="">Contact Us</a></li>
17+
</ul>
18+
</nav>
19+
20+
<div class="wrapper">
21+
<p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
22+
<p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
23+
<p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
24+
<p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur eveniet sunt quam provident sapiente dicta neque quod.</p>
25+
<p>Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime <a href="">odio</a>, distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!</p>
26+
</div>
27+
28+
<script>
29+
const triggers = document.querySelectorAll('a');
30+
const highlight = document.createElement('span');
31+
highlight.classList.add('highlight');
32+
document.body.append(highlight);
33+
34+
function highlightLink() {
35+
const linkCoords = this.getBoundingClientRect();
36+
console.log(linkCoords);
37+
const coords = {
38+
width: linkCoords.width,
39+
height: linkCoords.height,
40+
top: linkCoords.top + window.scrollY,
41+
left: linkCoords.left + window.scrollX
42+
};
43+
44+
highlight.style.width = `${coords.width}px`;
45+
highlight.style.height = `${coords.height}px`;
46+
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
47+
48+
}
49+
50+
triggers.forEach(a => a.addEventListener('mouseenter', highlightLink));
51+
52+
</script>
53+
</body>
54+
</html>
55+

‎22Follow/index-START.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>👀👀👀Follow Along Nav</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
<nav>
11+
<ul class="menu">
12+
<li><a href="">Home</a></li>
13+
<li><a href="">Order Status</a></li>
14+
<li><a href="">Tweets</a></li>
15+
<li><a href="">Read Our History</a></li>
16+
<li><a href="">Contact Us</a></li>
17+
</ul>
18+
</nav>
19+
20+
<div class="wrapper">
21+
<p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
22+
<p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
23+
<p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
24+
<p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur eveniet sunt quam provident sapiente dicta neque quod.</p>
25+
<p>Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime <a href="">odio</a>, distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!</p>
26+
</div>
27+
28+
<script>
29+
// 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
30+
const triggers = document.querySelectorAll('a');
31+
const highlight = document.createElement('span');
32+
highlight.classList.add('highlight');
33+
document.body.append(highlight);
34+
35+
36+
function higlightLink() {
37+
const linkCoords = this.getBoundingClientRect();
38+
console.log(linkCoords);
39+
const coords = {
40+
width: linkCoords.width,
41+
height: linkCoords.height,
42+
top: linkCoords.top + window.scrollY,
43+
left: linkCoords.left + window.scrollX
44+
}
45+
46+
highlight.style.width = `${coords.width}px`;
47+
highlight.style.height = `${coords.height}px`;
48+
49+
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
50+
51+
}
52+
53+
triggers.forEach(a => a.addEventListener('mouseenter', higlightLink));
54+
55+
</script>
56+
</body>
57+
</html>
58+

‎22Follow/style.css‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
html {
2+
box-sizing: border-box;
3+
}
4+
*, *:before, *:after {
5+
box-sizing: inherit;
6+
}
7+
body {
8+
min-height: 100vh;
9+
margin: 0; /* Important! */
10+
font-family: sans-serif;
11+
background:
12+
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
13+
linear-gradient(135deg, hsla(225, 95%, 50%, 1) 10%, hsla(225, 95%, 50%, 0) 80%),
14+
linear-gradient(225deg, hsla(140, 90%, 50%, 1) 10%, hsla(140, 90%, 50%, 0) 80%),
15+
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
16+
}
17+
18+
.wrapper {
19+
margin:0 auto;
20+
max-width:500px;
21+
font-size: 20px;
22+
line-height: 2;
23+
position: relative;
24+
}
25+
26+
a {
27+
text-decoration: none;
28+
color:black;
29+
background:rgba(0,0,0,0.05);
30+
border-radius: 20px
31+
}
32+
33+
.highlight {
34+
transition: all 0.2s;
35+
border-bottom:2px solid white;
36+
position: absolute;
37+
top:0;
38+
background:white;
39+
left:0;
40+
z-index: -1;
41+
border-radius:20px;
42+
display: block;
43+
box-shadow: 0 0 10px rgba(0,0,0,0.2)
44+
}
45+
46+
.menu {
47+
padding: 0;
48+
display: flex;
49+
list-style: none;
50+
justify-content: center;
51+
margin:100px 0;
52+
}
53+
54+
.menu a {
55+
display: inline-block;
56+
padding:5px;
57+
margin:0 20px;
58+
color:black;
59+
}

0 commit comments

Comments
 (0)