Skip to content

Commit f416d0b

Browse files
abstrxtInfinityabstrxtInfinity
committed
3d parallax
1 parent 6f73feb commit f416d0b

9 files changed

Lines changed: 152 additions & 0 deletions

File tree

‎parallax 3d/bg1.png‎

3.72 MB
Loading

‎parallax 3d/img1.jpg‎

6.06 KB
Loading

‎parallax 3d/img2.jpg‎

4.29 KB
Loading

‎parallax 3d/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
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+
<title>3d Parallax</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
<link
10+
href="https://fonts.googleapis.com/css?family=Oswald:700|Poppins"
11+
rel="stylesheet"
12+
/>
13+
</head>
14+
<body>
15+
<section>
16+
<nav>
17+
<h2>LOGO</h2>
18+
<a href="#" class="button">Sign Up</a>
19+
</nav>
20+
<div class="container">
21+
<h2 class="main-title">Explore</h2>
22+
<img src="./bg1.png" alt="#" class="bg" />
23+
<img src="./lady.png" alt="#" class="girl" />
24+
<img src="./rock.png" alt="#" class="rock" />
25+
</div>
26+
<div class="content">
27+
<div class="content-images">
28+
<div>
29+
<img src="./img1.jpg" alt="#" />
30+
<h4>Someplace</h4>
31+
<h3>Something about that place</h3>
32+
</div>
33+
<div>
34+
<img src="./img2.jpg" alt="#" />
35+
<h4>Someplace</h4>
36+
<h3>Something about that place</h3>
37+
</div>
38+
</div>
39+
<p class="text">
40+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, quia!
41+
Quidem inventore libero beatae voluptatum accusamus iusto aut rem
42+
ratione necessitatibus amet, tenetur ea ullam dolore asperiores,
43+
excepturi atque eaque.
44+
</p>
45+
<p class="text">
46+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, quia!
47+
Quidem inventore libero beatae voluptatum accusamus iusto aut rem
48+
ratione necessitatibus amet, tenetur ea ullam dolore asperiores,
49+
excepturi atque eaque.
50+
</p>
51+
</div>
52+
</section>
53+
</body>
54+
<script
55+
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"
56+
integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ=="
57+
crossorigin="anonymous"
58+
></script>
59+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
60+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script>
61+
<script src="./script.js"></script>
62+
</html>

‎parallax 3d/lady.png‎

828 KB
Loading

‎parallax 3d/pexels-taryn-elliott-4858581.jpg‎

3.24 MB
Loading

‎parallax 3d/rock.png‎

598 KB
Loading

‎parallax 3d/script.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
let controller = new ScrollMagic.Controller();
2+
let timeline = new TimelineMax();
3+
4+
timeline
5+
.to('.rock', 3, { y: -300 })
6+
.to('.girl', 3, { y: -200 }, '-=3')
7+
.fromTo('.bg', { y: -50 }, { y: 0, duration: 3 }, '-=3')
8+
.to('.content', 3, { top: '0%' }, '-=3')
9+
.fromTo('.content-images', { opacity: 0 }, { opacity: 1, duration: 1 }, '-=1')
10+
.fromTo('.text', { opacity: 0 }, { opacity: 1, duration: 1 }, '-=1');
11+
12+
13+
let scene = new ScrollMagic.Scene({
14+
triggerElement: 'section',
15+
duration: "150%",
16+
triggerHook: 0,
17+
18+
})
19+
.setTween(timeline)
20+
.setPin("section")
21+
.addTo(controller);
22+

‎parallax 3d/style.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
color: #fff;
6+
font-family: "Poppins", sans-serif;
7+
}
8+
body {
9+
background: rgba(24, 24, 24, 1);
10+
}
11+
12+
.container {
13+
height: 100vh;
14+
}
15+
.container img {
16+
width: 100%;
17+
height: 110vh;
18+
position: absolute;
19+
object-fit: cover;
20+
z-index: -1;
21+
}
22+
.main-title {
23+
position: absolute;
24+
top: 50%;
25+
left: 50%;
26+
font-size: 6rem;
27+
transform: translate(-50%, -50%);
28+
}
29+
nav {
30+
position: absolute;
31+
display: flex;
32+
padding: 3rem 10rem;
33+
justify-content: space-between;
34+
width: 100%;
35+
}
36+
.button {
37+
background: #fff;
38+
color: #000;
39+
padding: 10px 15px;
40+
font-size: 1.2rem;
41+
text-align: center;
42+
text-decoration: none;
43+
transition: outline 0.4s;
44+
}
45+
.button:hover {
46+
border: 3px solid #fff;
47+
background: transparent;
48+
color: #fff;
49+
}
50+
51+
.content {
52+
position: absolute;
53+
width: 100%;
54+
background-color: rgba(24, 24, 24, 1);
55+
min-height: 110vh;
56+
z-index: 2;
57+
}
58+
.content-images {
59+
display: flex;
60+
justify-content: space-around;
61+
align-items: center;
62+
min-height: 60vh;
63+
text-align: center;
64+
}
65+
.text {
66+
padding: 2rem 20rem;
67+
font-size: 1.1rem;
68+
}

0 commit comments

Comments
 (0)