added loaders to breathe

cold-magma · Apr 8, 2020 · 2f58db4 · 2f58db4
1 parent c10bb52
commit 2f58db4
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 28 deletions.
diff --git a/breathe/app.js b/breathe/app.js
@@ -1,6 +1,4 @@
-const parallax = document.getElementById("bgdiv");
-
-window.addEventListener("scroll", function() {
-	let offset = window.pageYOffeset;
-	parallax.style.backgroundPositionY = offset *.75 + "px";
-});
+window.onload = function() {
+	$(".loader-wrapper").fadeOut("slow");
+	document.body.classList.remove("scroll");
+}
diff --git a/breathe/breathe.html b/breathe/breathe.html
@@ -5,29 +5,41 @@
 	<link rel="stylesheet" type="text/css" href="css/breathestylesheet.css">
 	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
 </head> 
-<body> 
-<div class="main">
-	<div class="parallax1" data-parallax="scroll" data-image-src="./content/beach4.jpg" data-z-index="-1"><h1 class="p1">breathe</h1></div> 
-	<div class="layer2">
-		<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>
-		<h1>So just...</h1>
+<body class="scroll"> 
+	<div class="main">
+		<div class="parallax1" data-parallax="scroll" data-image-src="./content/beach4.jpg" data-z-index="-1">
+			<h1 class="p1">breathe</h1>
+		</div> 
+		<div class="layer2">
+			<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>
+			<h1>So just...</h1>
+		</div>
+		<div class="parallax2" data-parallax="scroll" data-image-src="./content/beach1.jpg" data-z-index="-1">
+			<h1 class="p2">Stop thinking</h1>
+		</div>
+		<div class="layer3">
+			<h1>Just take a step back.</h1>
+			<h1>Reflect on those little things that make you smile. Because they do what overthinking never could.</h1>
+		</div>
+		<div class="parallax3" data-parallax="scroll" data-image-src="./content/beach2.jpg" data-z-index="-1">
+			<h1 class="p1">So just smile.</h1>
+		</div>
 	</div>
-	<div class="parallax2" data-parallax="scroll" data-image-src="./content/beach1.jpg" data-z-index="-1">
-		<h1 class="p2">Stop thinking</h1>
+	<footer>
+		<h3>I know this is cheesy. Don't @ me. Please. Just smile for god's sake. Thanks.</h3>
+		<a href="https://github.com/cold-magma" target="_blank">@cold-magma</a>
+	</footer>
+	<div class="loader-wrapper">
+		<div class="loader">
+			<span class="obj"></span>
+			<span class="obj"></span>
+			<span class="obj"></span>
+			<span class="obj"></span>
+			<span class="obj"></span>
+		</div>
 	</div>
-	<div class="layer3">
-		<h1>Just take a step back.</h1>
-		<h1>Reflect on those little things that make you smile. Because they do what overthinking never could.</h1>
-	</div>
-	<div class="parallax3" data-parallax="scroll" data-image-src="./content/beach2.jpg" data-z-index="-1">
-		<h1 class="p1">So just smile.</h1>
-	</div>
-</div>
-<footer>
-	<h3>I know this is cheesy. Don't @ me. Please. Just smile for god's sake. Thanks.</h3>
-	<a href="https://github.com/cold-magma" target="_blank">@cold-magma</a>
-</footer>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="parallax.min.js"></script>
+<script type="text/javascript" src="app.js"></script>
 </body> 
 </html> 
diff --git a/breathe/css/breathestylesheet.css b/breathe/css/breathestylesheet.css
@@ -7,10 +7,52 @@ html{
 }
 body{
 	animation: fade 1s ease;
+	overflow-y: scroll;
 }
 body::-webkit-scrollbar{
 	width: 0;
 }
+.scroll{
+	overflow-y: hidden;
+}
+.loader-wrapper{
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: #38AEAD;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+}
+.loader{
+	display: flex;
+	width: auto;
+	height: auto;
+	background: #38AEAD;
+}
+.obj{
+	width: 0.2rem;
+	height: 1rem;
+	margin-right: 0.3rem;
+	background:white;
+}
+.obj:nth-child(1){
+	animation: bounce 0.5s ease-in-out infinite 0s;
+}
+.obj:nth-child(2){
+	animation: bounce 0.5s ease-in-out infinite 0.15s;	
+}
+.obj:nth-child(3){
+	animation: bounce 0.5s ease-in-out infinite 0.3s;
+}
+.obj:nth-child(4){
+	animation: bounce 0.5s ease-in-out infinite 0.45s;
+}
+.obj:nth-child(5){
+	animation: bounce 0.5s ease-in-out infinite 0.6s;
+}
 .main{
 	min-width: 100%;
 	justify-content: space-around;
@@ -35,7 +77,7 @@ body::-webkit-scrollbar{
 	display: flex;
 	flex-direction: column;
 	width: 100%;
-	box-shadow: 0 0 5px #FFF, 0 0 20px #696969, 0 0 50px #474747, 0 0 150px #363636;
+	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;
 	overflow: hidden;
 }
 .layer2 h1{
@@ -148,4 +190,26 @@ a{
 	to{
 		opacity: 1;
 	}
+}
+@keyframes bounce{
+	0%{
+		height: 1rem;
+		background: white;
+	}	
+	25%{
+		height: 1.25rem;
+		background: coral;
+	}
+	50%{
+		height: 1.5rem;
+		background: #8b44c2;
+	}
+	75%{
+		height: 1.25rem;
+		background: coral;
+	}	
+	100%{
+		height: 1rem;
+		background: white;
+	}	
 }
diff --git a/empyrean/app.js b/empyrean/app.js
@@ -1,5 +1,6 @@
 window.onload = function() {
 	$(".loader-wrapper").fadeOut("slow");
+	document.body.classList.remove("scroll");
 	lax.setup() // init
 	const updateLax = () => {
 		lax.update(window.scrollY)

diff --git a/empyrean/empyrean.html b/empyrean/empyrean.html
@@ -5,7 +5,7 @@
 	<link rel="stylesheet" type="text/css" href="empyreanstylesheet.css">
 	<link href="https://fonts.googleapis.com/css?family=Muli|Playfair+Display&display=swap" rel="stylesheet">
 </head>
-
+<body class="scroll">
 	<div class="main" id="main">
 		<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>
 

diff --git a/empyrean/empyreanstylesheet.css b/empyrean/empyreanstylesheet.css
@@ -33,6 +33,9 @@ body::-webkit-scrollbar-track:horizontal{
 body::-webkit-scrollbar-thumb:horizontal{
 	background: white;
 }
+.scroll{
+	overflow: hidden;
+}
 .loader-wrapper{
 	width: 100%;
 	height: 100%;