From 2f58db4ad3cf35a00a7f19ca05b812cdf4efe77f Mon Sep 17 00:00:00 2001 From: cold Date: Wed, 8 Apr 2020 10:15:41 +0530 Subject: [PATCH] added loaders to breathe --- breathe/app.js | 10 ++--- breathe/breathe.html | 52 ++++++++++++++---------- breathe/css/breathestylesheet.css | 66 ++++++++++++++++++++++++++++++- empyrean/app.js | 1 + empyrean/empyrean.html | 2 +- empyrean/empyreanstylesheet.css | 3 ++ 6 files changed, 106 insertions(+), 28 deletions(-) diff --git a/breathe/app.js b/breathe/app.js index 9072c0c..27c8b4c 100644 --- 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"; -}); \ No newline at end of file +window.onload = function() { + $(".loader-wrapper").fadeOut("slow"); + document.body.classList.remove("scroll"); +} diff --git a/breathe/breathe.html b/breathe/breathe.html index 6515d34..4d5cc99 100644 --- a/breathe/breathe.html +++ b/breathe/breathe.html @@ -5,29 +5,41 @@ - -
-

breathe

-
-

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.

-

So just...

+ +
+
+

breathe

+
+
+

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.

+

So just...

+
+
+

Stop thinking

+
+
+

Just take a step back.

+

Reflect on those little things that make you smile. Because they do what overthinking never could.

+
+
+

So just smile.

+
-
-

Stop thinking

+
+

I know this is cheesy. Don't @ me. Please. Just smile for god's sake. Thanks.

+ @cold-magma +
+
+
+ + + + + +
-
-

Just take a step back.

-

Reflect on those little things that make you smile. Because they do what overthinking never could.

-
-
-

So just smile.

-
-
-
-

I know this is cheesy. Don't @ me. Please. Just smile for god's sake. Thanks.

- @cold-magma -
+ \ No newline at end of file diff --git a/breathe/css/breathestylesheet.css b/breathe/css/breathestylesheet.css index 614c54e..692092f 100644 --- 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; + } } \ No newline at end of file diff --git a/empyrean/app.js b/empyrean/app.js index c7a7368..ab6a7cf 100644 --- 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 index cfb6275..a768dab 100644 --- a/empyrean/empyrean.html +++ b/empyrean/empyrean.html @@ -5,7 +5,7 @@ - +
diff --git a/empyrean/empyreanstylesheet.css b/empyrean/empyreanstylesheet.css index cc5665f..14fcae1 100644 --- 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%;