Skip to content

Commit 49290a5

Browse files
brunorodrisbrunorodris
committed
Vídeo: como criar o efeito parllax com ondas
1 parent e50ffe3 commit 49290a5

File tree

4 files changed

+138
-0
lines changed

4 files changed

+138
-0
lines changed

‎10 - paralax com ondas/img/wave.png‎

4.68 KB
Loading

‎10 - paralax com ondas/index.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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="style.css">
8+
<title>Paralax com Ondas</title>
9+
</head>
10+
<body>
11+
<section class="ondas-box">
12+
13+
<div class="titulo">
14+
<h1>Efeito Parallax com Ondas</h1>
15+
</div><!--titulo-->
16+
17+
<div class="onda" id="onda1"></div>
18+
<div class="onda" id="onda2"></div>
19+
<div class="onda" id="onda3"></div>
20+
<div class="onda" id="onda4"></div>
21+
</section>
22+
23+
<section class="conteudo">
24+
<h1>Efeito Parallax</h1>
25+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nisi, enim eveniet atque eaque ut iste animi nesciunt tempore esse placeat mollitia, voluptates nostrum totam dolorem, voluptatem corporis sit consequatur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi et a neque explicabo, debitis aspernatur adipisci? Quam accusantium odio voluptatum sint eveniet adipisci quo tenetur quasi, ipsa quos, voluptatem veniam.<br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione neque quasi facilis quam quos mollitia ipsa voluptates, sint at velit eum corrupti placeat? Nihil, quia dignissimos cupiditate nemo pariatur et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ullam quasi officia, non odit, sit aspernatur dicta eos, odio fuga expedita architecto nulla obcaecati labore at voluptate quae dolores ipsam!</p><br><br>
26+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nisi, enim eveniet atque eaque ut iste animi nesciunt tempore esse placeat mollitia, voluptates nostrum totam dolorem, voluptatem corporis sit consequatur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi et a neque explicabo, debitis aspernatur adipisci? Quam accusantium odio voluptatum sint eveniet adipisci quo tenetur quasi, ipsa quos, voluptatem veniam.<br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione neque quasi facilis quam quos mollitia ipsa voluptates, sint at velit eum corrupti placeat? Nihil, quia dignissimos cupiditate nemo pariatur et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ullam quasi officia, non odit, sit aspernatur dicta eos, odio fuga expedita architecto nulla obcaecati labore at voluptate quae dolores ipsam!</p><br><br>
27+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nisi, enim eveniet atque eaque ut iste animi nesciunt tempore esse placeat mollitia, voluptates nostrum totam dolorem, voluptatem corporis sit consequatur? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi et a neque explicabo, debitis aspernatur adipisci? Quam accusantium odio voluptatum sint eveniet adipisci quo tenetur quasi, ipsa quos, voluptatem veniam.<br><br> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione neque quasi facilis quam quos mollitia ipsa voluptates, sint at velit eum corrupti placeat? Nihil, quia dignissimos cupiditate nemo pariatur et. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id ullam quasi officia, non odit, sit aspernatur dicta eos, odio fuga expedita architecto nulla obcaecati labore at voluptate quae dolores ipsam!</p><br><br>
28+
</section>
29+
30+
<script src="main.js"></script>
31+
</body>
32+
</html>

‎10 - paralax com ondas/main.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
var onda1 = document.getElementById('onda1')
3+
var onda2 = document.getElementById('onda2')
4+
var onda3 = document.getElementById('onda3')
5+
var onda4 = document.getElementById('onda4')
6+
7+
window.addEventListener('scroll', function(){
8+
var rolagemPos = window.scrollY
9+
10+
onda1.style.backgroundPositionX = 400 + rolagemPos * 4 + 'px';
11+
onda2.style.backgroundPositionX = 300 + rolagemPos * -4 + 'px';
12+
onda3.style.backgroundPositionX = 200 + rolagemPos * 2 + 'px';
13+
onda4.style.backgroundPositionX = 100 + rolagemPos * -2 + 'px';
14+
})

‎10 - paralax com ondas/style.css‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Outfit', sans-serif;
8+
}
9+
10+
body{
11+
background-image: url('https://images.unsplash.com/photo-1582641857491-7e9987c2e415?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80');
12+
background-position: center;
13+
background-repeat: no-repeat;
14+
background-attachment: fixed;
15+
background-size: cover;
16+
}
17+
18+
.titulo{
19+
width: 100%;
20+
height: 100%;
21+
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
26+
position: fixed;
27+
z-index: -1;
28+
29+
font-size: 40px;
30+
color: #fff;
31+
}
32+
33+
.conteudo{
34+
padding: 100px;
35+
background-color: #fff;
36+
}
37+
38+
.conteudo h1{
39+
font-size: 3em;
40+
margin-bottom: 20px;
41+
}
42+
43+
.conteudo p{
44+
font-size: 1.5em;
45+
}
46+
47+
section.ondas-box{
48+
position: relative;
49+
width: 100%;
50+
height: 100vh;
51+
}
52+
53+
.onda{
54+
width: 100%;
55+
height: 100px;
56+
position: absolute;
57+
bottom: 0;
58+
background-image: url(img/wave.png);
59+
background-size: 1000px 100px;
60+
61+
animation: ondaAnimada 5s ease-in-out infinite alternate;
62+
}
63+
64+
@keyframes ondaAnimada {
65+
0%{
66+
transform: translateY(0px);
67+
}
68+
100%{
69+
transform: translateY(10px);
70+
}
71+
}
72+
73+
#onda1{
74+
z-index: 1000;
75+
opacity: 1;
76+
background-position-x: 400;
77+
}
78+
#onda2{
79+
z-index: 999;
80+
opacity: 0.5;
81+
background-position-x: 300px;
82+
}
83+
#onda3{
84+
z-index: 998;
85+
opacity: 0.2;
86+
background-position-x: 200px;
87+
}
88+
#onda4{
89+
z-index: 997;
90+
opacity: 0.8;
91+
background-position-x: 100px;
92+
}

0 commit comments

Comments
 (0)