Skip to content

Commit 8ee8095

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1209 from Mansi8874/patch_3
3D Navbar Animations
2 parents 8273927 + 2db90ff commit 8ee8095

4 files changed

Lines changed: 372 additions & 0 deletions

File tree

‎Projects/3d_Navbar_Animations/app.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
const hamburger_menu = document.querySelector(".hamburger-menu");
2+
const container = document.querySelector(".container");
3+
4+
hamburger_menu.addEventListener("click", () => {
5+
container.classList.toggle("active");
6+
});

‎Projects/3d_Navbar_Animations/bg.jpg‎

192 KB
Loading

‎Projects/3d_Navbar_Animations/index.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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>3D Navbar Animation</title>
7+
<link rel="stylesheet" href="style.css" />
8+
</head>
9+
<body>
10+
<div class="container">
11+
<div class="navbar">
12+
<div class="menu">
13+
<h3 class="logo">Brand<span>Name</span></h3>
14+
<div class="hamburger-menu">
15+
<div class="bar"></div>
16+
</div>
17+
</div>
18+
</div>
19+
20+
<div class="main-container">
21+
<div class="main">
22+
<header>
23+
<div class="overlay">
24+
<div class="inner">
25+
<h2 class="title">Future is here</h2>
26+
<p>
27+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
28+
Laudantium illum tenetur consequatur veritatis?
29+
</p>
30+
<button class="btn">Read more</button>
31+
</div>
32+
</div>
33+
</header>
34+
</div>
35+
36+
<div class="shadow one"></div>
37+
<div class="shadow two"></div>
38+
</div>
39+
40+
<div class="links">
41+
<ul>
42+
<li>
43+
<a href="#" style="--i: 0.05s;">Home</a>
44+
</li>
45+
<li>
46+
<a href="#" style="--i: 0.1s;">Services</a>
47+
</li>
48+
<li>
49+
<a href="#" style="--i: 0.15s;">Portfolio</a>
50+
</li>
51+
<li>
52+
<a href="#" style="--i: 0.2s;">Testimonials</a>
53+
</li>
54+
<li>
55+
<a href="#" style="--i: 0.25s;">About</a>
56+
</li>
57+
<li>
58+
<a href="#" style="--i: 0.3s;">Contact</a>
59+
</li>
60+
</ul>
61+
</div>
62+
</div>
63+
64+
<script src="app.js"></script>
65+
</body>
66+
</html>

‎Projects/3d_Navbar_Animations/style.css‎

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap");
2+
3+
* {
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
}
8+
9+
body,
10+
button {
11+
font-family: "Poppins", sans-serif;
12+
}
13+
14+
.container {
15+
min-height: 100vh;
16+
width: 100%;
17+
background-color: #485461;
18+
background-image: linear-gradient(135deg, #485461 0%, #28313b 74%);
19+
overflow-x: hidden;
20+
transform-style: preserve-3d;
21+
}
22+
23+
.navbar {
24+
position: fixed;
25+
top: 0;
26+
left: 0;
27+
width: 100%;
28+
z-index: 10;
29+
height: 3rem;
30+
}
31+
32+
.menu {
33+
max-width: 72rem;
34+
width: 100%;
35+
margin: 0 auto;
36+
padding: 0 2rem;
37+
display: flex;
38+
justify-content: space-between;
39+
align-items: center;
40+
color: #fff;
41+
}
42+
43+
.logo {
44+
font-size: 1.1rem;
45+
font-weight: 600;
46+
text-transform: uppercase;
47+
letter-spacing: 2px;
48+
line-height: 4rem;
49+
}
50+
51+
.logo span {
52+
font-weight: 300;
53+
}
54+
55+
.hamburger-menu {
56+
height: 4rem;
57+
width: 3rem;
58+
cursor: pointer;
59+
display: flex;
60+
align-items: center;
61+
justify-content: flex-end;
62+
}
63+
64+
.bar {
65+
width: 1.9rem;
66+
height: 1.5px;
67+
border-radius: 2px;
68+
background-color: #eee;
69+
transition: 0.5s;
70+
position: relative;
71+
}
72+
73+
.bar:before,
74+
.bar:after {
75+
content: "";
76+
position: absolute;
77+
width: inherit;
78+
height: inherit;
79+
background-color: #eee;
80+
transition: 0.5s;
81+
}
82+
83+
.bar:before {
84+
transform: translateY(-9px);
85+
}
86+
87+
.bar:after {
88+
transform: translateY(9px);
89+
}
90+
91+
.main {
92+
position: relative;
93+
width: 100%;
94+
left: 0;
95+
z-index: 5;
96+
overflow: hidden;
97+
transform-origin: left;
98+
transform-style: preserve-3d;
99+
transition: 0.5s;
100+
}
101+
102+
header {
103+
min-height: 100vh;
104+
width: 100%;
105+
background: url("bg.jpg") no-repeat top center / cover;
106+
position: relative;
107+
}
108+
109+
.overlay {
110+
position: absolute;
111+
width: 100%;
112+
height: 100%;
113+
top: 0;
114+
left: 0;
115+
background-color: rgba(43, 51, 59, 0.8);
116+
display: flex;
117+
justify-content: center;
118+
align-items: center;
119+
}
120+
121+
.inner {
122+
max-width: 35rem;
123+
text-align: center;
124+
color: #fff;
125+
padding: 0 2rem;
126+
}
127+
128+
.title {
129+
font-size: 2.7rem;
130+
}
131+
132+
.btn {
133+
margin-top: 1rem;
134+
padding: 0.6rem 1.8rem;
135+
background-color: #1179e7;
136+
border: none;
137+
border-radius: 25px;
138+
color: #fff;
139+
text-transform: uppercase;
140+
cursor: pointer;
141+
text-decoration: none;
142+
}
143+
144+
.container.active .bar {
145+
transform: rotate(360deg);
146+
background-color: transparent;
147+
}
148+
149+
.container.active .bar:before {
150+
transform: translateY(0) rotate(45deg);
151+
}
152+
153+
.container.active .bar:after {
154+
transform: translateY(0) rotate(-45deg);
155+
}
156+
157+
.container.active .main {
158+
animation: main-animation 0.5s ease;
159+
cursor: pointer;
160+
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
161+
}
162+
163+
@keyframes main-animation {
164+
from {
165+
transform: translate(0);
166+
}
167+
168+
to {
169+
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
170+
}
171+
}
172+
173+
.links {
174+
position: absolute;
175+
width: 30%;
176+
right: 0;
177+
top: 0;
178+
height: 100vh;
179+
z-index: 2;
180+
display: flex;
181+
justify-content: center;
182+
align-items: center;
183+
}
184+
185+
ul {
186+
list-style: none;
187+
}
188+
189+
.links a {
190+
text-decoration: none;
191+
color: #eee;
192+
padding: 0.7rem 0;
193+
display: inline-block;
194+
font-size: 1rem;
195+
font-weight: 300;
196+
text-transform: uppercase;
197+
letter-spacing: 1px;
198+
transition: 0.3s;
199+
opacity: 0;
200+
transform: translateY(10px);
201+
animation: hide 0.5s forwards ease;
202+
}
203+
204+
.links a:hover {
205+
color: #fff;
206+
}
207+
208+
.container.active .links a {
209+
animation: appear 0.5s forwards ease var(--i);
210+
}
211+
212+
@keyframes appear {
213+
from {
214+
opacity: 0;
215+
transform: translateY(10px);
216+
}
217+
to {
218+
opacity: 1;
219+
transform: translateY(0px);
220+
}
221+
}
222+
223+
@keyframes hide {
224+
from {
225+
opacity: 1;
226+
transform: translateY(0px);
227+
}
228+
to {
229+
opacity: 0;
230+
transform: translateY(10px);
231+
}
232+
}
233+
234+
.shadow {
235+
position: absolute;
236+
width: 100%;
237+
height: 100vh;
238+
top: 0;
239+
left: 0;
240+
transform-style: preserve-3d;
241+
transform-origin: left;
242+
transition: 0.5s;
243+
background-color: white;
244+
}
245+
246+
.shadow.one {
247+
z-index: -1;
248+
opacity: 0.15;
249+
}
250+
251+
.shadow.two {
252+
z-index: -2;
253+
opacity: 0.1;
254+
}
255+
256+
.container.active .shadow.one {
257+
animation: shadow-one 0.6s ease-out;
258+
transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);
259+
}
260+
261+
@keyframes shadow-one {
262+
0% {
263+
transform: translate(0);
264+
}
265+
266+
5% {
267+
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
268+
}
269+
270+
100% {
271+
transform: perspective(1300px) rotateY(20deg) translateZ(215px) scale(0.5);
272+
}
273+
}
274+
275+
.container.active .shadow.two {
276+
animation: shadow-two 0.6s ease-out;
277+
transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);
278+
}
279+
280+
@keyframes shadow-two {
281+
0% {
282+
transform: translate(0);
283+
}
284+
285+
20% {
286+
transform: perspective(1300px) rotateY(20deg) translateZ(310px) scale(0.5);
287+
}
288+
289+
100% {
290+
transform: perspective(1300px) rotateY(20deg) translateZ(120px) scale(0.5);
291+
}
292+
}
293+
294+
.container.active .main:hover + .shadow.one {
295+
transform: perspective(1300px) rotateY(20deg) translateZ(230px) scale(0.5);
296+
}
297+
298+
.container.active .main:hover {
299+
transform: perspective(1300px) rotateY(20deg) translateZ(340px) scale(0.5);
300+
}

0 commit comments

Comments
 (0)