Skip to content

Commit c5765f9

Browse files
Parv-gugnaniParv-gugnani
committed
hover
1 parent 177d099 commit c5765f9

File tree

3 files changed

+115
-0
lines changed

3 files changed

+115
-0
lines changed

‎Hover Links/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Document</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1 class="text">MY Work</h1>
12+
<h1 class="text">LinkDien<span>WOAH</span></h1>
13+
<h1 class="text">Twitter<span>GSAP</span></h1>
14+
<h1 class="text">Youtube<span>CRAZYYY</span></h1>
15+
<h1 class="text">
16+
HOVER ON ME<span
17+
><a
18+
href="https://github.com/Parv-gugnani/JavaScript-Projects.git"
19+
target="_blank"
20+
>SOURCE</a
21+
></span
22+
>
23+
</h1>
24+
<h1 class="text">
25+
LIKE THIS?<span
26+
><a href="https://twitter.com/Parv_developer" target="_blank"
27+
>LET'S CONNECT</a
28+
></span
29+
>
30+
</h1>
31+
</div>
32+
<script src="script.js"></script>
33+
</body>
34+
</html>
35+
<!-- -->

‎Hover Links/script.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
gsap.registerPlugin(ScrollTrigger);
2+
3+
const textElements = gsap.utils.toArray(".text");
4+
5+
textElements.forEach((text) => {
6+
gsap.to(text, {
7+
backgroundSize: "100%",
8+
ease: "none",
9+
scrollTrigger: {
10+
trigger: text,
11+
start: "center 80%",
12+
end: "center 20%",
13+
scrub: true,
14+
},
15+
});
16+
});

‎Hover Links/style.css‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Poppins', sans-serif;
5+
background-color: #0D0D0D;
6+
margin: 10%;
7+
}
8+
9+
.container {
10+
display: flex;
11+
flex-direction: column;
12+
justify-content: center;
13+
align-items: flex-start;
14+
height: 200vh;
15+
}
16+
17+
.text {
18+
font-size: 10vw;
19+
letter-spacing: -.01em;
20+
line-height: 100%;
21+
margin: 0;
22+
23+
width: 100%;
24+
color: rgb(182, 182, 182, 0.2);
25+
background: linear-gradient(to right, #b6b6b6, #b6b6b6) no-repeat;
26+
-webkit-background-clip: text;
27+
background-clip: text;
28+
background-size: 0%;
29+
transition: background-size cubic-bezier(.1, .5, .5, 1) 0.5s;
30+
31+
32+
border-bottom: 1px solid #2F2B28;
33+
34+
display: flex;
35+
flex-direction: column;
36+
align-items: flex-start;
37+
justify-content: center;
38+
position: relative;
39+
}
40+
41+
span {
42+
position: absolute;
43+
width: 100%;
44+
height: 100%;
45+
background-color: #4246ce;
46+
color: #0D0D0D;
47+
48+
clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
49+
transform-origin: center;
50+
transition: all cubic-bezier(.1, .5, .5, 1) 0.4s;
51+
52+
display: flex;
53+
flex-direction: column;
54+
justify-content: center;
55+
}
56+
57+
.text:hover>span {
58+
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
59+
}
60+
61+
a {
62+
text-decoration: none;
63+
color: inherit;
64+
}

0 commit comments

Comments
 (0)