How can I create my preloader to be visible on my site? - javascript

Basically, I have created a preloader I want to show on my site when the user clicks the link or refreshes the page. However, I need help implementing the preloader onto my site. For some reason, when I combine my preloader with my site code, the preloader does not show up at the beginning. It shows up in a space at the bottom of my carousel, acting like a parallax effect for some reason. How can I make it so my preloader is displaying correctly and fade out showing my site? Any help is appreciated. Down below is the code I am using. Here is a link of what I would like my preloader to be: https://planepreload.raymondnelson.repl.co/
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
$(window).on('load', function() {
$('.preload').delay(5000).fadeOut(1000);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 200vh;
background-color: #d7a4d9;
}
h3 {
color: #3F69CA
}
/* Preloader Code */
.preload {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #77b3d4;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5 ease;
}
.cloud1,
.cloud2,
.cloud3{
height: 100px;
position: absolute;
right: 0%;
z-index: -1;
}
.cloud1 {
top: 25%;
transform: translate(100%, -25%);
animation: clouds 3s ease infinite;
}
.cloud2 {
top: 50%;
transform: translate(100%, -50%);
animation: clouds 3s ease infinite 2s;
}
.cloud3 {
top: 75%;
transform: translate(100%, -75%);
animation: clouds 3s ease infinite 4s;
}
.airplane {
height: 200px;
animation: airplane 1s ease infinite alternate;
}
#keyframes airplane {
from {
transform: translateY(0px);
}
to {
transform: translateY(50px);
}
}
#keyframes clouds {
from {
right: 0%;
}
to {
right: 130%;
}
}
.preload .land {
position: absolute;
top: 75%;
transform: translateY(-75%);
color: white;
font-size: 30px;
font-family: sans-serif;
}
/* Navbar */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
font-family: "Hind";
}
header.sticky {
padding: 5px 100px;
background: #F5F5F5;
font-family: "Hind";
}
header .logo {
position: relative;
font-weight: 700;
color: #F5F5F5;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: "Hind";
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hind";
}
header ul li {
position: relative;
list-style: none;
font-family: "Hind";
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #F5F5F5;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: "Hind";
font-size: 20px;
}
header ul li a:hover {
text-decoration: underline;
color: black;
}
header.sticky .logo, header.sticky ul li a {
color: #000;
font-family: "Hind";
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.ddtext1 {
position: relative;
left: -5px;
}
.ddtext1:hover {
color: #00B800;
}
.ddtext2 {
position: relative;
left: -15px;
}
.ddtext2:hover {
color: #14adb3
}
.ddtext3 {
position: relative;
left: -20px;
}
.ddtext3:hover {
color: #E0A800;
}
.information {
background: linear-gradient( rgb(24, 23, 23, 0.4), rgb(24, 23, 23, 0.4)), url("blackbg.jpg");
background-size: cover;
height: 100vh;
}
.name {
position: relative;
top: 300px;
right: 200px;
text-align: center;
color: #20A4F3;
font-family: "Hind";
animation: fadeIn ease 4s;
font-size: 80px;
}
.text {
position: relative;
top: 300px;
text-align: center;
font-family: "Hind";
text-transform: uppercase;
}
.text h1 {
font-size: 50px;
color: #222;
}
.text span {
font-size: 50px;
animation: light 2s linear infinite;
}
/* Carousel */
#slider {
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 25s slider infinite;
}
#slider figure img {
width: 20%;
float: left;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet">
</head>
<body>
<div class = "load">
<div class="preload">
<img class="airplane" src="https://uce0f26a244f3c0cca3e7d07a830.previews.dropboxusercontent.com/p/thumb/AA-n6na-kOCtw8Bb8oYMYS7ujTjaqw6NiVJNq9sN_9JhpI8IQpbBvBOqyHRHI_05vuXhm-wajT-mh3XDkby6-4ModecGbJfeDEhXSRXt964rcuz4HhhTPGfQb0WJEEQuL0UuRXmzMm57ErG0SqIdWwLad21j_AglpMM8xfsMhXC-NzLfAoH7O9xsXhpzshhB3dsWYG--obRcwjaCpRh7eDxmxvRrXfa86VS3cmyh0a69vAPc8C6GFSje2oYY-M7Qykor8-mgfLHjLk3V42CvKyhiawUJKzcLwiNkyAW_veON8JZ0iBOcAGlL9429_3TcjwPTJQpn2Vk64ZfTjtBtZhDgtki9HqYz7CUCYeMAZIaEAQ/p.png?size=178x178&size_mode=1" alt="airplane" />
<h3 class = "land">Landing on the website...</h3>
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud1" class="cloud1" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud2" class="cloud2" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud3" class="cloud3" />
</div>
</div>
<!--Navbar-->
<header>
<a class="" href="#"></a>
<ul>
<li>
Home
</li>
<li>
<div class="dropdown">
<a class="dropbtn" href="gallery.html">Gallery</a>
<div class="dropdown-content">
<a class="ddtext1" href="asia.html">Asia</a> <a class="ddtext2" href="europe.html">Europe</a> <a class="ddtext3" href="na.html">America</a>
</div>
</div>
</li>
<li>
Contact
</li>
</ul>
</header>
<!--Home Page-->
<div id="information">
<div id="slider">
<figure>
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
</figure>
</div>
</div>
<script src="script.js"></script>
</body>
</html>


I added a z-index: 9999 rule for the preload class to overlap the main content for the duration of the animation. And also, adjust the z-index for the header tag - z-index: 9990. For the body tag, I set overflow: hidden to hide the scrollbar for the duration of the animation, and at the end of the animation, this scrollbar appears again, thanks to the adjustment of the jquery code:
$('body').css('overflow', 'visible');
window.addEventListener("scroll", function() {
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
$(window).on('load', function() {
$('.preload').delay(5000).fadeOut(1000, function() {
$('body').css('overflow', 'visible');
});
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
min-height: 200vh;
background-color: #d7a4d9;
overflow: hidden;
}
h3 {
color: #3F69CA
}
/* Preloader Code */
.preload {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #77b3d4;
display: flex;
justify-content: center;
align-items: center;
transition: opacity 0.5 ease;
z-index: 9999;
}
.cloud1,
.cloud2,
.cloud3{
height: 100px;
position: absolute;
right: 0%;
z-index: -1;
}
.cloud1 {
top: 25%;
transform: translate(100%, -25%);
animation: clouds 3s ease infinite;
}
.cloud2 {
top: 50%;
transform: translate(100%, -50%);
animation: clouds 3s ease infinite 2s;
}
.cloud3 {
top: 75%;
transform: translate(100%, -75%);
animation: clouds 3s ease infinite 4s;
}
.airplane {
height: 200px;
animation: airplane 1s ease infinite alternate;
}
#keyframes airplane {
from {
transform: translateY(0px);
}
to {
transform: translateY(50px);
}
}
#keyframes clouds {
from {
right: 0%;
}
to {
right: 130%;
}
}
.preload .land {
position: absolute;
top: 75%;
transform: translateY(-75%);
color: white;
font-size: 30px;
font-family: sans-serif;
}
/* Navbar */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 9990;
font-family: "Hind";
}
header.sticky {
padding: 5px 100px;
background: #F5F5F5;
font-family: "Hind";
}
header .logo {
position: relative;
font-weight: 700;
color: #F5F5F5;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
transition: 0.6s;
font-family: "Hind";
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-family: "Hind";
}
header ul li {
position: relative;
list-style: none;
font-family: "Hind";
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #F5F5F5;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-family: "Hind";
font-size: 20px;
}
header ul li a:hover {
text-decoration: underline;
color: black;
}
header.sticky .logo, header.sticky ul li a {
color: #000;
font-family: "Hind";
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
max-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.ddtext1 {
position: relative;
left: -5px;
}
.ddtext1:hover {
color: #00B800;
}
.ddtext2 {
position: relative;
left: -15px;
}
.ddtext2:hover {
color: #14adb3
}
.ddtext3 {
position: relative;
left: -20px;
}
.ddtext3:hover {
color: #E0A800;
}
.information {
background: linear-gradient( rgb(24, 23, 23, 0.4), rgb(24, 23, 23, 0.4)), url("blackbg.jpg");
background-size: cover;
height: 100vh;
}
.name {
position: relative;
top: 300px;
right: 200px;
text-align: center;
color: #20A4F3;
font-family: "Hind";
animation: fadeIn ease 4s;
font-size: 80px;
}
.text {
position: relative;
top: 300px;
text-align: center;
font-family: "Hind";
text-transform: uppercase;
}
.text h1 {
font-size: 50px;
color: #222;
}
.text span {
font-size: 50px;
animation: light 2s linear infinite;
}
/* Carousel */
#slider {
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 25s slider infinite;
}
#slider figure img {
width: 20%;
float: left;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css2?family=Hind&display=swap" rel="stylesheet">
</head>
<body>
<div class = "load">
<div class="preload">
<img class="airplane" src="https://uce0f26a244f3c0cca3e7d07a830.previews.dropboxusercontent.com/p/thumb/AA-n6na-kOCtw8Bb8oYMYS7ujTjaqw6NiVJNq9sN_9JhpI8IQpbBvBOqyHRHI_05vuXhm-wajT-mh3XDkby6-4ModecGbJfeDEhXSRXt964rcuz4HhhTPGfQb0WJEEQuL0UuRXmzMm57ErG0SqIdWwLad21j_AglpMM8xfsMhXC-NzLfAoH7O9xsXhpzshhB3dsWYG--obRcwjaCpRh7eDxmxvRrXfa86VS3cmyh0a69vAPc8C6GFSje2oYY-M7Qykor8-mgfLHjLk3V42CvKyhiawUJKzcLwiNkyAW_veON8JZ0iBOcAGlL9429_3TcjwPTJQpn2Vk64ZfTjtBtZhDgtki9HqYz7CUCYeMAZIaEAQ/p.png?size=178x178&size_mode=1" alt="airplane" />
<h3 class = "land">Landing on the website...</h3>
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud1" class="cloud1" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud2" class="cloud2" />
<img src="https://uced21f913a097d93229a4d305a6.previews.dropboxusercontent.com/p/thumb/AA-h9fXSjZiT_JeqBnoUIIjfqcAs8QJIGSX9cUfQv2MKpJvn4EEnaxZGTgfUHiP2sgqoFLtVMOddWJLpjovKwNycGuBsSTPvfVi4-rT4Vl7pI55sfCwYAwFhRpYTuDarv0cYMXvt_rqNuN5XO63h_Ko44v4vGPs0WNlD_UrD-59-5xSYd4ve5BGwwXqI8U1iOb1ieoqSRPsv6CZApkWlD4GERrmewKAwnubLsONTyT3SG60kHd490r9pBmHkjok6a4YD4fcviIMsFJl25THm7JmEYkK-LbMamygbnpPXOc_p3VX-WhkS7w1Pz97e5XqrpM9VoxXulwMZhRpDcun6-lHNO0J7ehREbwLJzjfluce3Cw/p.png?size=178x178&size_mode=1" alt="cloud3" class="cloud3" />
</div>
</div>
<!--Navbar-->
<header>
<a class="" href="#"></a>
<ul>
<li>
Home
</li>
<li>
<div class="dropdown">
<a class="dropbtn" href="gallery.html">Gallery</a>
<div class="dropdown-content">
<a class="ddtext1" href="asia.html">Asia</a> <a class="ddtext2" href="europe.html">Europe</a> <a class="ddtext3" href="na.html">America</a>
</div>
</div>
</li>
<li>
Contact
</li>
</ul>
</header>
<!--Home Page-->
<div id="information">
<div id="slider">
<figure>
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
<img src="https://c4.wallpaperflare.com/wallpaper/906/767/707/polygon-triangles-geometric-patterns-wallpaper-preview.jpg">
</figure>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Related

Centering a Nav-bar that's also a hamburger menu

I copied a hamburger menu with some nice animations, did some adjustments for it to fit into my site, for mobile. Now i'm trying to make that menu get out of the hamburger and into the middle of the screen for desktop. What i'm running into is the menu having really wierd positioning and normal "centering" such as justify-content and others do not work. I also tried putting it into a grid, but with no luck. I'll paste my html and css here and hope you can give me any help, wheter it is how I can center it or just re-writeing things so it works.
What i'm trying to accomplish is the menu being a hamburger for phone and for desktop it should be a "normal" nav-bar centered at the bottom of the site, responsive.
I'm kind of new so it could be kind of janky but yea... :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
background-color: #262626;
font-family: "Roboto Slab", serif;
position: relative;
overflow-x: hidden;
}
main {
width: 100vw;
height: 100vh;
}
#backdrop {
width: 90%;
height: 100%;
margin: 0 auto;
margin-top: 1rem;
border-radius: 1rem 1rem 0 0;
background-color: #727365;
}
#home-link {
color: #f2f2e4;
text-decoration: none;
font-size: 1.7rem;
font-family: "Space Mono", monospace;
font-weight: 400;
position: absolute;
top: 1.95rem;
left: 2.6rem;
}
/* Hamburger menu */
#menu a {
text-decoration: none;
color: #3f403b;
}
#menu a:hover {
color: #0c0c0c;
}
#menu-toggle {
display: block;
position: absolute;
top: 2.5rem;
right: 3rem;
z-index: 1;
}
#menu-checkbox {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu-toggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #f2f2e4;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
opacity 0.55s ease;
}
#menu-toggle span:first-child {
transform-origin: 0% 0%;
}
#menu-toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menu-checkbox:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #3f403b;
}
#menu-checkbox:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu-checkbox:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
width: 60vw;
height: 70vh;
position: absolute;
right: -100px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
background-color: #bfbfae;
list-style: none;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menu-checkbox:checked ~ ul {
transform: none;
opacity: 1;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 3px solid transparent;
background-clip: content-box;
background-color: rgb(88, 88, 88);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(109, 109, 109);
}
/* Media queries */
#media only screen and (min-width: 600px) {
}
#media only screen and (min-width: 769px) {
#backdrop {
width: 98%;
height: 95.5%;
border-radius: 1rem;
}
#menu-checkbox {
display: none;
}
#menu-toggle span {
display: none;
}
#menu {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
transform: none !important;
padding: 0 1rem 0 1rem;
position: absolute;
top: 97vh;
right: 38.2vw;
border-radius: 1rem;
height: fit-content;
width: max-content;
}
#menu li {
display: inline-block;
}
#home-link {
display: flex;
justify-content: center;
position: static;
padding-top: 0.5rem;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OVERCASTING</title>
<link rel="stylesheet" href="css/style.css" />
<script src="script/js.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#200;300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<div id="backdrop">
<header id="wrapper">
<nav>
OVERCASTING
<div id="menu-toggle">
<input id="menu-checkbox" type="checkbox" />
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</nav>
</header>
</div>
</main>
</body>
</html>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
overflow-x: hidden;
}
body {
background-color: #262626;
font-family: "Roboto Slab", serif;
position: relative;
overflow-x: hidden;
}
main {
width: 100vw;
height: 100vh;
}
#backdrop {
width: 90%;
height: 100%;
margin: 0 auto;
margin-top: 1rem;
border-radius: 1rem 1rem 0 0;
background-color: #727365;
}
#home-link {
color: #f2f2e4;
text-decoration: none;
font-size: 1.7rem;
font-family: "Space Mono", monospace;
font-weight: 400;
position: absolute;
top: 1.95rem;
left: 2.6rem;
}
/* Hamburger menu */
#menu a {
text-decoration: none;
color: #3f403b;
}
#menu a:hover {
color: #0c0c0c;
}
#menu-toggle {
display: block;
position: absolute;
top: 2.5rem;
right: 3rem;
z-index: 1;
}
#menu-checkbox {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
z-index: 2;
}
#menu-toggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #f2f2e4;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
opacity 0.55s ease;
}
#menu-toggle span:first-child {
transform-origin: 0% 0%;
}
#menu-toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
#menu-checkbox:checked ~ span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #3f403b;
}
#menu-checkbox:checked ~ span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
#menu-checkbox:checked ~ span:nth-last-child(2) {
opacity: 1;
transform: rotate(-45deg) translate(0, -1px);
}
#menu {
width: 60vw;
height: 70vh;
position: absolute;
right: -100px;
margin: -100px 0 0 0;
padding: 50px;
padding-top: 125px;
background-color: #bfbfae;
list-style: none;
transform-origin: 0% 0%;
transform: translate(100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
}
#menu li {
padding: 10px 0;
font-size: 22px;
}
#menu-checkbox:checked ~ ul {
transform: none;
opacity: 1;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 13px;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
border: 3px solid transparent;
background-clip: content-box;
background-color: rgb(88, 88, 88);
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(109, 109, 109);
}
/* Media queries */
#media only screen and (min-width: 600px) {
}
#media only screen and (min-width: 769px) {
#backdrop {
width: 98%;
height: 95.5%;
border-radius: 1rem;
}
#menu-checkbox {
display: none;
}
#menu-toggle span {
display: none;
}
#menu {
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition: none !important;
transition: none !important;
transform: none !important;
padding: 0 1rem 0 1rem;
position: absolute;
top: 97vh;
right: 38.2vw;
border-radius: 1rem;
height: fit-content;
width: max-content;
}
#menu li {
display: inline-block;
}
#home-link {
display: flex;
justify-content: center;
position: static;
padding-top: 0.5rem;
}
}
#media only screen and (min-width: 769px) {
#menu-toggle {
right: unset;
position: relative;
top: -30px;
}
}
#media only screen and (min-width: 769px){
#menu {
margin-left: auto;
margin-right: auto;
position: relative;
right: unset;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>OVERCASTING</title>
<link rel="stylesheet" href="css/style.css" />
<script src="script/js.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght#200;300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap"
rel="stylesheet"
/>
</head>
<body>
<main>
<div id="backdrop">
<header id="wrapper">
<nav>
OVERCASTING
<div id="menu-toggle">
<input id="menu-checkbox" type="checkbox" />
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<span class="hamburger-span"></span>
<ul id="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</nav>
</header>
</div>
</main>
</body>
</html>
How does this look?
I've added the following CSS at the end of your CSS block
#media only screen and (min-width: 769px) {
#menu-toggle {
right: unset;
position: relative;
top: -30px;
}
}
#media only screen and (min-width: 769px){
#menu {
margin-left: auto;
margin-right: auto;
position: relative;
right: unset;
}
}

Why doesn`t work my popup, although I connect Js?

Yesterday I made a popup in Html, Css and JS but it didn`t work.
Javascript is connected with the Html file, the button can you see on the header everytime, but I`ll that when I click on the button "Codes" that a popup open...
In a other project from me the popup works with the same code...
What shall I do that it works? Or what is the mistake in the code?
function togglePopup() {
document.getElementById("popup").classList.toggle("active");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: color 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Mobile Nav */
.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: width 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: color 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.togglebutton {
border-color: #0088a9;
}
#pop-up {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
}
#pop-up.open {
visibility: visible;
opacity: 1;
}
#pop-box {
position: relative;
max-width: 400px;
background: #fff;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
}
#pop-title {
padding: 10px;
margin: 0;
background: #921515;
color: #fff;
}
#pop-text {
padding: 10px;
margin: 0;
background: #fff;
color: #555;
}
#pop-close {
position: absolute;
top: 0;
right: 5px;
padding: 5px;
color: #ffdcdc;
font-size: 32px;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
<header>
<a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
<nav>
<ul class="nav__links">
<button>Skins</button>
<button onclick="togglePopup()">Codes</button>
<li>Download</li>
</ul>
<div class="popup" id="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>
</nav>
<a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>
</main>

Your id is misspelled. popup <-> pop-up
You should add open not active in js toggle function.
function togglePopup() {
document.getElementById("popup").classList.toggle("open");
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.logo {
cursor: pointer;
}
.nav__links a,
.cta,
.overlay__content a {
font-family: "Montserrat", sans-serif;
font-weight: 500;
color: #edf0f1;
text-decoration: none;
}
.nav__links {
list-style: none;
display: flex;
}
.nav__links li {
padding: 0px 20px;
}
.nav__links li a {
transition: color 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Mobile Nav */
.menu {
display: none;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
left: 0;
top: 0;
background-color: #24252a;
overflow-x: hidden;
transition: width 0.5s ease 0s;
}
.overlay--active {
width: 100%;
}
.overlay__content {
display: flex;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.overlay a {
padding: 15px;
font-size: 36px;
display: block;
transition: color 0.3s ease 0s;
}
.overlay a:hover,
.overlay a:focus {
color: #0088a9;
}
.overlay .close {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
color: #edf0f1;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px;
}
.overlay .close {
font-size: 40px;
top: 15px;
right: 35px;
}
}
#media only screen and (max-width: 800px) {
.nav__links,
.cta {
display: none;
}
.menu {
display: initial;
}
}
.togglebutton {
border-color: #0088a9;
}
#popup {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
width: 100vw;
height: 100vh;
visibility: hidden;
opacity: 0;
background: rgba(255, 255, 255, 0.8);
transition: opacity 0.2s;
}
#popup.open {
visibility: visible;
opacity: 1;
}
#pop-box {
position: relative;
max-width: 400px;
background: #fff;
margin: 50vh auto 0 auto;
transform: translateY(-50%);
}
#pop-title {
padding: 10px;
margin: 0;
background: #921515;
color: #fff;
}
#pop-text {
padding: 10px;
margin: 0;
background: #fff;
color: #555;
}
#pop-close {
position: absolute;
top: 0;
right: 5px;
padding: 5px;
color: #ffdcdc;
font-size: 32px;
cursor: pointer;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:500&display=swap" rel="stylesheet">
<header>
<a class="logo" href="#"><img src="LogoGro.png" height="80" width="300" alt="logo"></a>
<nav>
<ul class="nav__links">
<button>Skins</button>
<button onclick="togglePopup()">Codes</button>
<li>Download</li>
</ul>
<div class="popup active" id="popup">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>
</nav>
<a class="cta" href="https://discord.gg/7S4FaYEw">Discord Server</a>
</header>
<main>
</main>

First and foremost your id attribute is "popup" and in your CSS rules is "pop-up".
Then in your CSS rules, you use the class "open" to show the popup, but in the JS you use "active".
So to work properly you should change the following:
function togglePopup() {
document.getElementById("popup").classList.toggle("open");
}
Then change:
<div class="popup" id="pop-up">
<div class="overlay"></div>
<div class="content">
<div class="close-btn" onclick="togglePopup()">×</div>
<h1>title</h1>
</div>
</div>

change color when class have changed to 'open'

I made a hamburger menu with a class of .hamburger (inside .hamburger, there is a three .line classes)
shown hamburger menu
When I click a hamburger menu, class .nav-links pops up and class name changes to .nav-links .open when I inspect.
My problem is that opened .nav-links color is same as a color I gave to the hamburger menu.
but it disappears as they both have a same color
So I tried to change a hamburger menu(with a class .line) color when class .nav-links change to .nav-links .open but fail to figure out the solution.
const hamburger = document.querySelector(".hamburger");
const navlinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener('click', () => {
navlinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle('fade');
});
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
button {
font-family: "Poppins", sans-serif;
}
header {
display: flex;
width: 90%;
height: 10vh;
align-items: center;
margin: auto;
}
.logo-container,
.nav-links,
.cart {
display: flex;
}
.logo-container {
flex: 1;
}
.logo-container img {
width: 23px;
}
.logo {
font-size: 13px;
font-weight: 400;
margin: 5px;
opacity: 0.8;
}
nav {
flex: 2;
}
.nav-links {
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 13px;
text-decoration: none;
}
.cart {
flex: 1;
justify-content: flex-end;
}
.cart img {
width: 23px;
}
.presentation {
display: flex;
width: 90%;
margin: auto;
margin-bottom: -80px;
min-height: 80vh;
align-items: center;
}
.introduction {
flex: 1;
}
.intro-text h1 {
font-size: 30px;
font-weight: 500;
background: linear-gradient(to right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.intro-text p {
margin-top: 5px;
font-size: 13px;
color: #585772;
}
.cta {
padding: 50px 0px 0px 0px;
}
.cta-select {
border: 1px solid #585772;
background: transparent;
color: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
}
.cta-add {
background: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
border: none;
color: white;
margin: 20px 0px 0px 20px;
}
.cover {
flex: 1;
display: flex;
justify-content: center;
height: 60vh;
align-items: center;
z-index: -1;
}
.cover img {
height: 70%;
filter: drop-shadow(0px 5px 3px black);
animation: drop 1.5s ease;
}
.big-circle {
position: absolute;
top: 0px;
right: 0px;
z-index: -1;
opacity: 0.5;
height: 60%;
}
.medium-circle {
position: absolute;
top: 30%;
right: 30%;
z-index: -1;
height: 40%;
opacity: 0.4;
}
.small-circle {
position: absolute;
height: 40%;
bottom: 0%;
right: 20%;
z-index: -1;
opacity: 0.4;
}
.laptop-select {
width: 15%;
height: 8px;
display: flex;
justify-content: space-around;
position: absolute;
right: 20%;
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 1024px) {
.line {
width: 15px;
height: 1px;
border-radius: 15%;
background-color: #585772;
margin: 4px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: -38%;
top: 50%;
transform: translate(-38%, -50%);
z-index: 1;
}
.nav-links {
position: fixed;
background-color: #585772;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
z-index: 0;
flex-direction: column;
align-items: center;
clip-path: circle(100px at 100% -20%);
-webkit-clip-path: circle(100px at 100% -20%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1500px at 100% -20%);
-webkit-clip-path: circle(1500px at 100% -20%);
pointer-events: all;
}
.nav-link {
color: white;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
.presentation {
flex-direction: column;
}
.introduction {
margin-top: 5vh;
text-align: center;
}
.intro-text h1 {
font-size: 30px;
}
.intro-text p {
font-size: 18px;
}
.cta {
padding: 10px 0px 0px 0px;
}
.laptop-select {
bottom: 5%;
right: 50%;
width: 50%;
transform: translate(50%, 5%);
}
.cover img {
height: 80%;
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.2;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo-container">
<img src="./img/logo.svg" alt="logo" />
<h4 class="logo">Three Dots</h4>
</div>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#">Specs</a></li>
<li><a class="nav-link" href="#">Products</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<div class="cart">
<img src="./img/cart.svg" alt="cart" />
</div>
</header>
<main>
<section class="presentation">
<div class="introduction">
<div class="intro-text">
<h1>Laptop fot the future</h1>
<p>the new 14 inch bezeless display oferring a 4k display with touch screen.</p>
</div>
<div class="cta">
<button class="cta-select">14 Inch</button>
<button class="cta-add">Add To Cart</button>
</div>
</div>
<div class="cover">
<img src="./img/matebook.png" alt="matebook" />
</div>
</section>
<div class="laptop-select">
<img src="./img/arrow-left.svg" alt="">
<img src="./img/dot.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/arrow-right.svg" alt="">
</div>
<img class="big-circle" src="./img/big-eclipse.svg" alt="" />
<img class="medium-circle" src="./img/mid-eclipse.svg" alt="" />
<img class="small-circle" src="./img/small-eclipse.svg" alt="" />
</main>
<script src="script.js"></script>
</body>
</html>

Ok, try this out.
What I did was get all the line elements, toggled open on them, for which I added a .line.open bit in the CSS which paints them white.
const hamburger = document.querySelector(".hamburger");
const navlinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
const hamLines = document.querySelectorAll(".line");
hamburger.addEventListener('click', () => {
navlinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle('fade');
});
hamLines.forEach(link => {
link.classList.toggle('open');
});
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
button {
font-family: "Poppins", sans-serif;
}
header {
display: flex;
width: 90%;
height: 10vh;
align-items: center;
margin: auto;
}
.logo-container,
.nav-links,
.cart {
display: flex;
}
.logo-container {
flex: 1;
}
.logo-container img {
width: 23px;
}
.logo {
font-size: 13px;
font-weight: 400;
margin: 5px;
opacity: 0.8;
}
nav {
flex: 2;
}
.nav-links {
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 13px;
text-decoration: none;
}
.cart {
flex: 1;
justify-content: flex-end;
}
.cart img {
width: 23px;
}
.presentation {
display: flex;
width: 90%;
margin: auto;
margin-bottom: -80px;
min-height: 80vh;
align-items: center;
}
.introduction {
flex: 1;
}
.intro-text h1 {
font-size: 30px;
font-weight: 500;
background: linear-gradient(to right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.intro-text p {
margin-top: 5px;
font-size: 13px;
color: #585772;
}
.cta {
padding: 50px 0px 0px 0px;
}
.cta-select {
border: 1px solid #585772;
background: transparent;
color: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
}
.cta-add {
background: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
border: none;
color: white;
margin: 20px 0px 0px 20px;
}
.cover {
flex: 1;
display: flex;
justify-content: center;
height: 60vh;
align-items: center;
z-index: -1;
}
.cover img {
height: 70%;
filter: drop-shadow(0px 5px 3px black);
animation: drop 1.5s ease;
}
.big-circle {
position: absolute;
top: 0px;
right: 0px;
z-index: -1;
opacity: 0.5;
height: 60%;
}
.medium-circle {
position: absolute;
top: 30%;
right: 30%;
z-index: -1;
height: 40%;
opacity: 0.4;
}
.small-circle {
position: absolute;
height: 40%;
bottom: 0%;
right: 20%;
z-index: -1;
opacity: 0.4;
}
.laptop-select {
width: 15%;
height: 8px;
display: flex;
justify-content: space-around;
position: absolute;
right: 20%;
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 1024px) {
.line {
width: 15px;
height: 1px;
border-radius: 15%;
background-color: #585772;
margin: 4px;
}
.line.open {
background-color: white;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: -38%;
top: 50%;
transform: translate(-38%, -50%);
z-index: 1;
}
.nav-links {
position: fixed;
background-color: #585772;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
z-index: 0;
flex-direction: column;
align-items: center;
clip-path: circle(100px at 100% -20%);
-webkit-clip-path: circle(100px at 100% -20%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1500px at 100% -20%);
-webkit-clip-path: circle(1500px at 100% -20%);
pointer-events: all;
}
.nav-link {
color: white;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
.presentation {
flex-direction: column;
}
.introduction {
margin-top: 5vh;
text-align: center;
}
.intro-text h1 {
font-size: 30px;
}
.intro-text p {
font-size: 18px;
}
.cta {
padding: 10px 0px 0px 0px;
}
.laptop-select {
bottom: 5%;
right: 50%;
width: 50%;
transform: translate(50%, 5%);
}
.cover img {
height: 80%;
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.2;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo-container">
<img src="./img/logo.svg" alt="logo" />
<h4 class="logo">Three Dots</h4>
</div>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#">Specs</a></li>
<li><a class="nav-link" href="#">Products</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<div class="cart">
<img src="./img/cart.svg" alt="cart" />
</div>
</header>
<main>
<section class="presentation">
<div class="introduction">
<div class="intro-text">
<h1>Laptop fot the future</h1>
<p>the new 14 inch bezeless display oferring a 4k display with touch screen.</p>
</div>
<div class="cta">
<button class="cta-select">14 Inch</button>
<button class="cta-add">Add To Cart</button>
</div>
</div>
<div class="cover">
<img src="./img/matebook.png" alt="matebook" />
</div>
</section>
<div class="laptop-select">
<img src="./img/arrow-left.svg" alt="">
<img src="./img/dot.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/arrow-right.svg" alt="">
</div>
<img class="big-circle" src="./img/big-eclipse.svg" alt="" />
<img class="medium-circle" src="./img/mid-eclipse.svg" alt="" />
<img class="small-circle" src="./img/small-eclipse.svg" alt="" />
</main>
<script src="script.js"></script>
</body>
</html>

how to start webkit animation after page load?

I have an animation with my header wrapper and I want the animation to start after the page completely loads.
However it seems like it starts before the page loads. I looked up a function on css tricks and that is what i am using here.
It seems the animation starts a little early. Any help with this?
From the post on css tricks i added a class "preload" to the body and then removed the class in my JavScript to start the animation but does not seem to work.
<!---------------------------HTML ------------------------>
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body class = "preload">
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper anim fadeInDown">
<div class = "heading">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
</body>
</html>
<!--------------------------------------CSS------------------------------>
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
/*----------------------------------------------------------HEADER-----------------------------------------------------------------------*/
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
<!-----------------------------------------JS------------------------------>
$(window).load(function() {
$("body").removeClass("preload");
});

Remove .fadeInDown class from wrapper div
Make wrapper div display:none by default.
Add display:block !important; CSS to .fadeInDown class
On page ready add .fadeInDown class to wrapper div.
$( document ).ready(function() {
$(".wrapper").addClass("fadeInDown");
});
*{
margin: 0;
padding: 0;
}
body{
margin: 0;
font-family: 'Raleway', sans-serif;
padding: 0;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.preload * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
}
header{
position: relative;
display: block;
width: 100%;
height: 100vh;
bottom: 0;
margin: 0;
}
.header-bg{
position: absolute;
width: 100%;
height: 100%;
background-image: url(macbook2.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
.header-dark{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.wrapper{
width: 850px;
height: auto;
margin-top: -50px;
}
h2{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
h4{
color: white;
text-align: center;
letter-spacing: 0.1em;
}
ul{
list-style-type: none;
text-align: center;
padding: 0;
margin-top: 20px;
}
ul li{
display: inline-block;
padding: 0 13px;
}
.ion-social-facebook{
color: white;
font-size: 28px;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-facebook:visited{
color: white;
}
.ion-social-twitter{
color: white;
font-size: 28px;
}
.ion-social-linkedin{
color: white;
font-size: 28px;
}
nav{
position: fixed;
width: 100%;
height: auto;
z-index: 100;
background: rgba(0,0,0,0.4);
}
.nav-links{
float: right;
color: #fff;
margin: 20px 10px;
text-decoration: none;
}
.nav-links.last{
margin-right: 30px;
}
nav > a{
position: relative;
text-decoration: none;
}
nav > a:before{
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: -3px;
left: 0;
background-color: #ffffff;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
nav a:hover:before{
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.logo:link{
margin-left: 30px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
}
.heading{
color: white;
text-align: center;
font-size: 30px;
}
.box-name{
color: white;
text-align: center;
border: 6px solid white;
padding: 9px;
font-size: 75px;
margin-bottom: 10px;
letter-spacing: 2px;
margin-top: 10px;
text-transform: uppercase;
font-family: 'Raleway', sans-serif;
font-weight: 500;
}
.anim{
-webkit-animation-duration: 1s;
-animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
#keyframes fadeInDown{
0%{
opacity: 0;
-webkit-transform: translateY(-60px);
}
100%{
opacity: 1;
-webkit-transform: translateY(0px);
}
}
.fadeInDown{
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
display:block !important;
}
<!DOCTYPE html>
<html lang = "en-us">
<head>
<title>Carlos Elizondo</title>
<link rel = "stylesheet" type = "text/css" href = "main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel = "stylesheet" type = "text/css" href = "animate.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500" rel="stylesheet">
</head>
<body class="preload">
<!------------------------------------------------------------HEADER------------------------------------------------------------------>
<header>
<div class="header-bg"></div>
<div class="header-dark">
<div class="wrapper anim" style='display:none'>
<div class = "heading">Hi. My Name is</div>
<div class = "box-name">Carlos Elizondo</div>
<div class = "heading">I'm a future web developer and current student </div>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<nav class = "clearfix">
Contact
Portfolio
Skills
About Me
</nav>
</header>
</body>
</html>

This preload class prevents transitions, but not keyframe animations. It's also a bit hacky.
Instead of removing a class on page load, it might make more sense to add the fadeInDown class in your $(window).load function, which will cause the CSS animation to run immediately after the class is added. Just remember to remove that class from the HTML, as it will now be added in JS.
$(window).load(function() {
$(".wrapper").addClass("fadeInDown");
});

Codepen JQuery Code Doesn't Work In My Browser

I've searched online for a solution to this problem for a while now. Unfortunately, no luck. Here is the website I'm using the code from http://codepen.io/anon/pen/wagbYZ
Here is my code:
HTML -
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="main.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="main_h">
<div class="row">
<a class="logo" href="#">L/F</a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Section 01</li>
<li>Section 02</li>
<li>Section 03</li>
<li>Section 04</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<div class="hero">
<h1><span>loser friendly</span><br>Batman nav.</h1>
<div class="mouse">
<span></span>
</div>
</div>
<div class="row content">
<h1 class="sec01">Section 01</h1>
<p>Hello World!</p>
<h1 class="sec02">Section 02</h1>
<p>Hello World!</p>
<h1 class="sec03">Section 03</h1>
<p>Hello World!</p>
<h1 class="sec04">Section 04</h1>
<p>Hello World!</p>
</div>
</body>
</html>
CSS:
#mixin small {
#media only screen and (max-width: 766px) {
#content;
}
}
$color: #8f8f8f;
$color2: #e8f380;
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
#include small {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
.mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid lighten($color, 30%);
}
.logo {
width: 50px;
font-size: 25px;
color: $color;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
#include small {
float: none;
}
}
nav {
float: right;
width: 60%;
#include small {
width: 100%;
}
ul {
list-style: none;
overflow: hidden;
text-align: right;
float: right;
#include small {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
#include small {
width: 100%;
padding: 7px 0;
margin: 0;
}
}
a {
color: #888888;
text-transform: uppercase;
font-size: 12px;
}
}
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
#include small {
display: block;
}
span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: $color;
display: block;
}
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: $color;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://srdjanpajdic.com/slike/2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
h1 {
font-size: 50px;
line-height: 1.3;
span {
font-size: 25px;
color: $color2;
border-bottom: 2px solid $color2;
padding-bottom: 12px;
line-height: 3;
}
}
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid $color2;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -14px;
span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: $color2;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
JS:
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
The HTML and CSS work fine, but the JQuery is giving me problems.

try wrapping the code in jquery document ready event
$(document).ready(function(){
//event listeners
});

Categories