Skip to content

Commit 0fa0b45

Browse files
brunorodrisbrunorodris
committed
Como criar um Menu Transparente com Efeito de Rolagem
1 parent 885f1c5 commit 0fa0b45

File tree

4 files changed

+138
-0
lines changed

4 files changed

+138
-0
lines changed

‎11 - menu transparente/imagens/banner.jpg‎

1.81 MB
Loading

‎11 - menu transparente/index.html‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="pt-br">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
8+
<title>Menu Transparente</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
<header id="header">
13+
<div class="container">
14+
15+
<div class="flex">
16+
17+
<a href="#"><i class="bi bi-globe-americas"></i></a>
18+
19+
<nav>
20+
<ul>
21+
<li><a href="#">HOME</a></li>
22+
<li><a href="#">PASSAGENS</a></li>
23+
<li><a href="#">DESTINOS</a></li>
24+
<li><a href="#">BLOG</a></li>
25+
</ul>
26+
</nav>
27+
28+
<div class="btn-contato">
29+
<a href="#"><button>CONTATO</button></a>
30+
</div>
31+
32+
</div><!--flex-->
33+
34+
</div><!--container-->
35+
</header>
36+
37+
<section class="banner">
38+
<h1>DESCUBRA UM <span>NOVO MUNDO</span></h1>
39+
</section>
40+
41+
<script src="menu.js"></script>
42+
</body>
43+
</html>

‎11 - menu transparente/menu.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
2+
window.addEventListener("scroll", function(){
3+
let header = document.querySelector('#header')
4+
header.classList.toggle('rolagem', window.scrollY > 500)
5+
})

‎11 - menu transparente/style.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
2+
*{
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
font-family: 'Poppins', sans-serif;
7+
}
8+
9+
html{
10+
height: 500vh;
11+
background-color: #000;
12+
}
13+
14+
.container{
15+
max-width: 1280px;
16+
margin: auto;
17+
}
18+
19+
.flex{
20+
display: flex;
21+
align-items: center;
22+
justify-content: space-between;
23+
}
24+
25+
header{
26+
width: 100%;
27+
padding: 60px 4%;
28+
position: fixed;
29+
top: 0;
30+
left: 0;
31+
transition: .5s;
32+
}
33+
34+
header.rolagem{
35+
background-color: #fff;
36+
padding: 20px 4%;
37+
}
38+
39+
header.rolagem a, header.rolagem i{
40+
color: #FE775A;
41+
}
42+
43+
header i{
44+
font-size: 30px;
45+
color: #fff;
46+
}
47+
48+
header ul{
49+
list-style-type: none;
50+
}
51+
52+
header ul li{
53+
display: inline-block;
54+
margin: 0 40px;
55+
}
56+
57+
header ul li a{
58+
color: #fff;
59+
text-decoration: none;
60+
}
61+
62+
.btn-contato button{
63+
width: 120px;
64+
height: 40px;
65+
border: 0;
66+
background-color: #FE775A;
67+
color: #fff;
68+
cursor: pointer;
69+
transition: .2s;
70+
}
71+
72+
.banner{
73+
height: 100vh;
74+
background-image: url(imagens/banner.jpg);
75+
background-position: 100% 0;
76+
background-repeat: no-repeat;
77+
background-size: cover;
78+
79+
display: flex;
80+
align-items: center;
81+
justify-content: center;
82+
}
83+
84+
.banner h1{
85+
font-size: 4em;
86+
}
87+
88+
.banner h1 span{
89+
color: #FFAE81;
90+
}

0 commit comments

Comments
 (0)