I do have a feeling that this post will get a lot more negative responses as compared to positive ones but it's ok, one response containing the correct answer is worth it!
Ok, this feature is a bit hard to explain in words. I want to add a loading animation whenever a button from the navigation bar is clicked. It should take up 100vh height and 100vw width and should be from right to left and then disappear. (Need help with both CSS and js, maybe HTML too)
I suggest checking out https://www.jacekjeznach.com using a laptop. You can see the really cool loading animation going on when you click on any of the options from the main navigation bar situated on the left side of the website I know I can't make the exact effect without becoming an expert in web development. I even checked out the GitHub repo of his portfolio but there was no index.html there. A lot of .jsx files (ReactJS) though.
I know the basics of HTML, CSS, JS and never worked with any frameworks (not been more than 2 months since I started learning web dev) but I need help with this project because it is a college assignment. I chose to make an eLearning website, similar to what this guy teaches(using webflow and few backend tools like MemberStack, Airtable & Zapier): https://www.youtube.com/watch?v=1-_rGcBQLzE&list=PL23ZvcdS3XPINPbP6y06tcLY_rZLi8euf
I am allowed to use any frameworks but I am not allowed to use any website building tools(I can't explain the complex javascript code if I ignore the instructions and use it anyway). Connection to the backend is a plus point but not a requirement. Currently I am just making the basic homepage of the website and its code is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.slide {
width: 97vw;
height: 97vh;
margin: auto;
}
.wrapper {
display: flex;
flex-direction: row;
width: 500vw;
transform: rotate(90deg) translateY(-97vh);
transform-origin: top left;
}
.one {
background: #efdefe;
}
.two {
background: #a3f3d3;
}
.three {
background: rgb(245, 228, 228);
}
.four {
background: #ffddcc;
}
.five {
background: rgb(245, 241, 225);
}
.outer-wrapper {
width: 97vh;
height: 97vw;
margin: auto;
transform: rotate(-90deg) translateX(-97vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}
.wrap-class {
margin-left: 1vw;
display: flex;
align-items: middle;
justify-content: space-around;
height: 100vh;
width: 10vw;
align-content: space-between;
justify-content: center;
position: fixed;
flex-direction: column;
vertical-align: center;
}
/*Code for the horizontal navbar on left side: */
.navbar {
width: 10vw;
height: auto;
}
.margin1vh {
margin-top: 0.7vh;
margin-bottom: 0.7vh;
}
a:-webkit-any-link {
text-decoration: none;
color: white;
padding: 1vw;
padding-left: 0;
display: block;
/* padding: 3vh 1vw 3vh 1; */
height: 100%;
width: 100%;
}
button {
background-color: black;
display: block;
width: 100%;
box-shadow: inset 2px 2px black, 4px 4px 0 grey;
}
button:hover {
transform: scale(1.1);
}
html {
background-color: black;
/* filter: invert(1); */
scroll-behavior: smooth;
}
/*This code allow us to add linear gradient to a text*/
p,
h1 {
display: block;
margin-left: 31%;
margin-top: 5000px !important;
max-width: 1vw;
background: rgb(2, 0, 36);
background: radial-gradient(circle,
rgba(2, 0, 36, 1) 0%,
rgba(165, 106, 108, 1) 0%,
rgba(175, 99, 99, 1) 0%,
rgba(148, 116, 123, 1) 0%,
rgba(91, 153, 175, 1) 0%,
rgba(62, 172, 200, 1) 0%,
rgba(194, 226, 162, 1) 0%,
rgba(0, 212, 255, 1) 0%,
rgba(18, 255, 21, 1) 14%,
rgba(230, 65, 87, 1) 29%,
rgba(194, 185, 52, 1) 46%,
rgba(43, 83, 210, 1) 64%,
rgba(59, 221, 55, 1) 80%,
rgba(222, 85, 217, 1) 92%);
-webkit-background-clip: text;
background-clip: text;
/*for compatibility with safari browser*/
-webkit-text-fill-color: transparent;
display: inline;
background-size: 300%;
animation: bg-animation 17s infinite;
}
@keyframes bg-animation {
0% {
background-position: left;
}
50% {
background-position: right;
}
100% {
background-position: left;
}
}
/*Now, let's add the animation that happens when a button of fixed position is clicked: */
.animation-on-click {
min-width: 100vw;
min-height: 100vh;
background-color: black;
animation-name: animate;
animation-duration: 2s;
animation-iteration-count: 1;
overflow: visible;
}
@keyframes animate {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide one" id="one">
<div>
<br />
<br />
<h1>Welcome to the website</h1>
</div>
</div>
<div class="slide two" id="two">
<div>
<br />
<br />
<h1>Welcome to the eLearning website</h1>
</div>
</div>
<div class="slide three" id="three"></div>
<div class="slide four" id="four"></div>
<div class="slide five" id="five"></div>
</div>
</div>
<div class="wrap-class">
<div class="navbar">
<button>
<a href="#one" onclick="clicked()">Home</a>
</button>
<div class="margin1vh"></div>
<button>
<a href="#two">About</a>
</button>
<div class="margin1vh"></div>
<button>
<a href="#three">Website</a>
</button>
<div class="margin1vh"></div>
<button>
<a href="#four">Support</a>
</button>
<div class="margin1vh"></div>
<button>
<a href="#five" style="scroll-behavior: smooth !important">Contact</a>
</button>
</div>
</div>
<script>
function clicked() {
var element = document.getElementById("one");
element.classList.add("animation-on-click");
setTimeout(function () {
element.classList.remove("animation-on-click");
}, 2000);
}
</script>
</body>
</html>
I just need a loading animation (without a loading bar should also work) but it should be done on the whole screen. I think I might change the background color of all the elements in CSS horizontal flexbox to black also because black is the best background and it will allow me to change width ad height attributes of the .slide class and translateX and translateY functions from 97vw, 97vh to 100vw, 100vh (as they were in the original code)
Btw, I have combined the codes of CSS and JS files in the HTML file here to be able to share the code here on StackOverflow. You can visit https://github.com/shubham-garg1/web-project to check the GitHub code. I have also published the work done till now online so you can go to http://www.elearningweb.tk and check the sources files.
Any help is appreciated, thanks.
