Skip to content

Commit 2f58db4

Browse files
cold-magmacold-magma
committed
added loaders to breathe
1 parent c10bb52 commit 2f58db4

File tree

6 files changed

+106
-28
lines changed

6 files changed

+106
-28
lines changed

‎breathe/app.js

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
const parallax = document.getElementById("bgdiv");
2-
3-
window.addEventListener("scroll", function() {
4-
let offset = window.pageYOffeset;
5-
parallax.style.backgroundPositionY = offset *.75 + "px";
6-
});
1+
window.onload = function() {
2+
$(".loader-wrapper").fadeOut("slow");
3+
document.body.classList.remove("scroll");
4+
}

‎breathe/breathe.html

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,41 @@
55
<link rel="stylesheet" type="text/css" href="css/breathestylesheet.css">
66
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
77
</head>
8-
<body>
9-
<div class="main">
10-
<div class="parallax1" data-parallax="scroll" data-image-src="./content/beach4.jpg" data-z-index="-1"><h1 class="p1">breathe</h1></div>
11-
<div class="layer2">
12-
<h1>Sometimes we think too much about stuff that does not warrant our attention. At least not as much as we give it anyway. We think too hard.</h1>
13-
<h1>So just...</h1>
8+
<body class="scroll">
9+
<div class="main">
10+
<div class="parallax1" data-parallax="scroll" data-image-src="./content/beach4.jpg" data-z-index="-1">
11+
<h1 class="p1">breathe</h1>
12+
</div>
13+
<div class="layer2">
14+
<h1>Sometimes we think too much about stuff that does not warrant our attention. At least not as much as we give it anyway. We think too hard.</h1>
15+
<h1>So just...</h1>
16+
</div>
17+
<div class="parallax2" data-parallax="scroll" data-image-src="./content/beach1.jpg" data-z-index="-1">
18+
<h1 class="p2">Stop thinking</h1>
19+
</div>
20+
<div class="layer3">
21+
<h1>Just take a step back.</h1>
22+
<h1>Reflect on those little things that make you smile. Because they do what overthinking never could.</h1>
23+
</div>
24+
<div class="parallax3" data-parallax="scroll" data-image-src="./content/beach2.jpg" data-z-index="-1">
25+
<h1 class="p1">So just smile.</h1>
26+
</div>
1427
</div>
15-
<div class="parallax2" data-parallax="scroll" data-image-src="./content/beach1.jpg" data-z-index="-1">
16-
<h1 class="p2">Stop thinking</h1>
28+
<footer>
29+
<h3>I know this is cheesy. Don't @ me. Please. Just smile for god's sake. Thanks.</h3>
30+
<a href="https://github.com/cold-magma" target="_blank">@cold-magma</a>
31+
</footer>
32+
<div class="loader-wrapper">
33+
<div class="loader">
34+
<span class="obj"></span>
35+
<span class="obj"></span>
36+
<span class="obj"></span>
37+
<span class="obj"></span>
38+
<span class="obj"></span>
39+
</div>
1740
</div>
18-
<div class="layer3">
19-
<h1>Just take a step back.</h1>
20-
<h1>Reflect on those little things that make you smile. Because they do what overthinking never could.</h1>
21-
</div>
22-
<div class="parallax3" data-parallax="scroll" data-image-src="./content/beach2.jpg" data-z-index="-1">
23-
<h1 class="p1">So just smile.</h1>
24-
</div>
25-
</div>
26-
<footer>
27-
<h3>I know this is cheesy. Don't @ me. Please. Just smile for god's sake. Thanks.</h3>
28-
<a href="https://github.com/cold-magma" target="_blank">@cold-magma</a>
29-
</footer>
3041
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
3142
<script src="parallax.min.js"></script>
43+
<script type="text/javascript" src="app.js"></script>
3244
</body>
3345
</html>

‎breathe/css/breathestylesheet.css

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,52 @@ html{
77
}
88
body{
99
animation: fade 1s ease;
10+
overflow-y: scroll;
1011
}
1112
body::-webkit-scrollbar{
1213
width: 0;
1314
}
15+
.scroll{
16+
overflow-y: hidden;
17+
}
18+
.loader-wrapper{
19+
position: absolute;
20+
top: 0;
21+
left: 0;
22+
width: 100%;
23+
height: 100%;
24+
background: #38AEAD;
25+
display: flex;
26+
align-items: center;
27+
justify-content: space-around;
28+
}
29+
.loader{
30+
display: flex;
31+
width: auto;
32+
height: auto;
33+
background: #38AEAD;
34+
}
35+
.obj{
36+
width: 0.2rem;
37+
height: 1rem;
38+
margin-right: 0.3rem;
39+
background:white;
40+
}
41+
.obj:nth-child(1){
42+
animation: bounce 0.5s ease-in-out infinite 0s;
43+
}
44+
.obj:nth-child(2){
45+
animation: bounce 0.5s ease-in-out infinite 0.15s;
46+
}
47+
.obj:nth-child(3){
48+
animation: bounce 0.5s ease-in-out infinite 0.3s;
49+
}
50+
.obj:nth-child(4){
51+
animation: bounce 0.5s ease-in-out infinite 0.45s;
52+
}
53+
.obj:nth-child(5){
54+
animation: bounce 0.5s ease-in-out infinite 0.6s;
55+
}
1456
.main{
1557
min-width: 100%;
1658
justify-content: space-around;
@@ -35,7 +77,7 @@ body::-webkit-scrollbar{
3577
display: flex;
3678
flex-direction: column;
3779
width: 100%;
38-
box-shadow: 0 0 5px #FFF, 0 0 20px #696969, 0 0 50px #474747, 0 0 150px #363636;
80+
box-shadow: 0 0 2px #474747,0 0 5px #474747,0 0 10px #363636, 0 0 20px #363636, 0 0 50px #000, 0 0 150px #000;
3981
overflow: hidden;
4082
}
4183
.layer2 h1{
@@ -148,4 +190,26 @@ a{
148190
to{
149191
opacity: 1;
150192
}
193+
}
194+
@keyframes bounce{
195+
0%{
196+
height: 1rem;
197+
background: white;
198+
}
199+
25%{
200+
height: 1.25rem;
201+
background: coral;
202+
}
203+
50%{
204+
height: 1.5rem;
205+
background: #8b44c2;
206+
}
207+
75%{
208+
height: 1.25rem;
209+
background: coral;
210+
}
211+
100%{
212+
height: 1rem;
213+
background: white;
214+
}
151215
}

‎empyrean/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
window.onload = function() {
22
$(".loader-wrapper").fadeOut("slow");
3+
document.body.classList.remove("scroll");
34
lax.setup() // init
45
const updateLax = () => {
56
lax.update(window.scrollY)

‎empyrean/empyrean.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<link rel="stylesheet" type="text/css" href="empyreanstylesheet.css">
66
<link href="https://fonts.googleapis.com/css?family=Muli|Playfair+Display&display=swap" rel="stylesheet">
77
</head>
8-
8+
<body class="scroll">
99
<div class="main" id="main">
1010
<div id="d1" class="lax" data-lax-bg-pos-y="0 0, 10 0, 20 -5, 30 -10, 40 -15, 50 -20, 60 -25, 70 -30, 80 -35, 90 -40 , 100 -50, 150 -75, 200 -100, 300 -150, 400 -200, 500 -250"></div>
1111

‎empyrean/empyreanstylesheet.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@ body::-webkit-scrollbar-track:horizontal{
3333
body::-webkit-scrollbar-thumb:horizontal{
3434
background: white;
3535
}
36+
.scroll{
37+
overflow: hidden;
38+
}
3639
.loader-wrapper{
3740
width: 100%;
3841
height: 100%;

0 commit comments

Comments
 (0)