Full screen overlay menu with HTML,CSS,JavaScript

Full screen overlay menu with HTML,CSS,JavaScript - javascript

I am trying to make a full-screen overlay navigation menu. And I don't know what am I doing wrong.
So I am using a checkbox as a toggler for the fullscreen navigation menu. And also using a hamburger for the button.
This might have a small error that I don't seem to find but I am a beginner in this.
please help
this is Html code
<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div>
</div>
</div>
</div>
<div class="fullpagemenu" id="menu">
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
<section class="landing">
<img src="./circles.svg" alt="dots">
<h1>Dots</h1>
</section>
<script type="text/javascript" src="/js/index.js"></script>
this is index.js. This is also working fine as it toggles the active class in fullpagemenu div
const toggler = document.querySelector(".toggler");
const menu = document.querySelector("#menu");
toggler.addEventListener("click", () => {
menu.classList.toggle("active");
});
this is index.css. Everything works fine when I set the top to 0 in fullpagemenu class.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
}
.fullpagemenu{
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.fullpagemenu .active{
top: 0%;
}
.fullpagemenu .nav{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow-y: auto;
}
.fullpagemenu .nav ul{
position: relative;
}
.fullpagemenu .nav ul li{
position: relative;
list-style: none;
padding: 0 20px;
margin: 5px 0;
overflow: hidden;
display: table;
}
.fullpagemenu .nav ul li:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: orange;
transition: transform 0.5s ease-in-out;
transform: scaleY(0);
transform-origin: bottom;
}
.fullpagemenu .nav ul li:hover:before{
transition: transform 0.5s ease-in-out;
transform: scaleY(1);
transform-origin: top;
}
.fullpagemenu .nav ul li a{
position: relative;
color: black;
text-decoration: none;
font-size: 4em;
font-weight: 700;
line-height: 1.2em;
padding-top: 12px;
display: inline-block;
text-transform: uppercase;
transition: 0.5s ease-in-out;
}
.fullpagemenu .nav ul li a:before {
content: attr(data-text);
position: absolute;
bottom: -100%;
left: 0;
color: black;
}
.fullpagemenu .nav ul li:hover a {
transform: translateY(-100%);
color: black;
}
.landing{
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.landing h1{
margin: 100px;
font-size: 50px;
color: purple;
}
/* MENU STYLES */
.menu-wrap {
position: fixed;
top: 10px;
right: 20px;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 10px;
right: 20px;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 10px;
right: 20px;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: orange;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: black;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* Moves Line Down */
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}

you have a space between the .fullpagemenu .active and it should be: .fullpagemenu.active edit this and your code works:
const toggler = document.querySelector(".toggler");
const menu = document.querySelector("#menu");
toggler.addEventListener("click", () => {
menu.classList.toggle("active");
});
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
min-height: 100vh;
}
.fullpagemenu{
position: fixed;
top: -100%;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.fullpagemenu.active{
top: 0;
}
.fullpagemenu .nav{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
overflow-y: auto;
}
.fullpagemenu .nav ul{
position: relative;
}
.fullpagemenu .nav ul li{
position: relative;
list-style: none;
padding: 0 20px;
margin: 5px 0;
overflow: hidden;
display: table;
}
.fullpagemenu .nav ul li:before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: orange;
transition: transform 0.5s ease-in-out;
transform: scaleY(0);
transform-origin: bottom;
}
.fullpagemenu .nav ul li:hover:before{
transition: transform 0.5s ease-in-out;
transform: scaleY(1);
transform-origin: top;
}
.fullpagemenu .nav ul li a{
position: relative;
color: black;
text-decoration: none;
font-size: 4em;
font-weight: 700;
line-height: 1.2em;
padding-top: 12px;
display: inline-block;
text-transform: uppercase;
transition: 0.5s ease-in-out;
}
.fullpagemenu .nav ul li a:before {
content: attr(data-text);
position: absolute;
bottom: -100%;
left: 0;
color: black;
}
.fullpagemenu .nav ul li:hover a {
transform: translateY(-100%);
color: black;
}
.landing{
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.landing h1{
margin: 100px;
font-size: 50px;
color: purple;
}
/* MENU STYLES */
.menu-wrap {
position: fixed;
top: 10px;
right: 20px;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 10px;
right: 20px;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 10px;
right: 20px;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: orange;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: black;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* Moves Line Down */
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div>
</div>
</div>
</div>
<div class="fullpagemenu" id="menu">
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Portfolio</li>
<li>Team</li>
<li>Contact</li>
</ul>
</div>
</div>
<section class="landing">
<img src="./circles.svg" alt="dots">
<h1>Dots</h1>
</section>

Related

Click checked pure hamburger menu on window/document click

This question may seem similar to other questions but my hamburger menu uses checkbox to function and shows up at 768px width and below and I've been running into issues trying to close the open hamburger menu when the window/document is clicked.
I successfully got it to work using several ways but it still doesn't work as intended. The hamburger menu closes on document click alright, but the hamburger menu no longer closes on hamburger menu click as it originally should.
I have very little knowledge of Javascript/Jquery but I understand the bits I used to make other parts of the code work, but I just can't figure out how to make this particular one work.
Below is the code required to recreate the problem:
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
$('.menu-btn').click();
}
});
});
//With vanilla JS
/* window.onclick = function(event) {
if (document.getElementById('menu-btn').checked) {
document.getElementById('menu-btn').click();
}
} */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>
Here is also a fiddle of the code.

Your issue is in this line:
$('.menu-btn').click();
It's enough you changed it to this:
e.preventDefault();
$('.menu-btn').click();
With the first line you prevent the default action while with the second you initiated the click event for the correct element.
$(document).ready(function() {
// Script to push the section down on menu click
$(".menu-btn").click(function(e) {
e.stopPropagation();
$(".main-content").toggleClass("open");
});
// Script to collapse menu on link click
$(".nav-link").click(function(e) {
e.stopPropagation();
$(".menu-btn").click();
});
//Script to close the menu on window/document click
//With Jquery
$(document).click(function(e) {
if (!$('.menu-btn').is(e.target) // if the target of the click isn't the button...
&&
($(('.menu-btn')).is(":checked"))) {
e.preventDefault();
$('.menu-btn').click();
}
});
});
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
min-width: fit-content;
}
body {
font-family: "Montserrat", sans-serif;
background-color: #eeeeee;
}
header {
width: 100%;
background-color: #eeeeee;
padding: 0 20px;
height: 65px;
position: fixed;
top: 0;
}
.logo {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
#header-img {
width: 100%;
height: 100%;
max-width: 300px;
}
/* Navigation */
nav {
width: 100%;
text-align: center;
}
/* Hamburger menu button */
.menu-btn {
display: none;
}
.menu-icon {
display: inline-block;
position: relative;
top: -42px;
left: -25px;
cursor: pointer;
padding: 24px 14px;
z-index: 1;
}
.navicon {
background-color: #222222;
display: block;
height: 3px;
width: 26px;
position: relative;
transition: 0.3192s ease-in-out;
}
.navicon:before,
.navicon:after {
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
background-color: #222222;
transition: 0.3192s ease-in-out;
}
.navicon:before {
top: 9px;
}
.navicon:after {
bottom: 9px;
}
/* Hamburger Menu Animation Start */
.menu-btn:checked~.menu-icon .navicon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked~.menu-icon .navicon:after {
transform: rotate(45deg);
bottom: 0;
}
.menu-btn:checked~.menu-icon .navicon {
background: transparent;
transition: 0.3192s ease-in-out;
}
/* Hide blue background on hamburger menu tap on some mobile devices */
.menu-icon,
.menu-btn,
.navicon {
-webkit-tap-highlight-color: transparent;
}
/* Nav items */
.menu {
background-color: #eeeeee;
width: 100%;
height: auto;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
right: 0;
margin-top: 65px;
padding: 0;
visibility: hidden;
opacity: 0;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu-btn:checked~nav .menu {
visibility: visible;
opacity: 1;
transition: visibility 0.3192s ease-in-out, opacity 0.3192s ease-in-out;
}
.menu li {
border-top: 1px solid #c7c7c7;
padding: 10px 0;
opacity: 0;
transition: 0.5s;
}
.menu a {
color: #222222;
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
opacity: 0;
transition: 0.5s;
}
.menu-btn:checked~nav .menu a,
.menu-btn:checked~nav .menu li {
opacity: 1;
transition: 0.3192s ease-in-out;
}
/* MAIN CONTENT */
.main-content {
margin-top: 100px;
margin-left: 30px;
margin-right: 30px;
transition: 0.3192s ease-in-out;
}
/* For jquery */
.main-content.open {
margin-top: 195px;
transition: 0.3192s ease-in-out;
}
/* First section */
section.hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
h2 {
margin: 0;
margin-bottom: 15px;
font-weight: 600;
font-size: 1.5rem;
}
#form input[type="email"] {
width: 100%;
max-width: 300px;
padding: 6px;
font-family: inherit;
font-size: 0.9rem;
border: 1px solid #c7c7c7;
border-radius: 5px;
}
#form input[type="submit"] {
width: 100%;
max-width: 150px;
height: 30px;
margin: 15px 0;
border: 0;
border-radius: 5px;
background-color: #f1c40f;
font-family: inherit;
font-size: 1rem;
font-weight: 500;
}
/* Medium devices (landscape tablets, 768px and up) */
#media only screen and (min-width: 768px) {
header {
display: flex;
align-items: center;
justify-content: space-around;
}
.logo {
width: 60vw;
margin-top: 0;
justify-content: flex-start;
}
.menu-icon {
display: none;
}
nav {
width: 40vw;
margin-top: 0;
}
.menu {
width: 100%;
transform: none;
transition: none;
position: static;
margin: 0;
visibility: visible;
opacity: 1;
display: flex;
justify-content: space-around;
align-items: center;
}
.menu li {
border: none;
padding: 0;
opacity: 1;
transition: none;
}
.menu a {
opacity: 1;
transition: none;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main id="main">
<header id="header">
<div class="logo">
<img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo">
</div>
<input type="checkbox" class="menu-btn" id="menu-btn">
<label for="menu-btn" class="menu-icon"><span class="navicon"></span></label>
<nav id="nav-bar">
<ul class="menu">
<li>Feautures</li>
<li>How it Works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<div class="main-content">
<section class="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<form action="" id="form">
<input type="email" name="email" id="email" placeholder="Enter your email address" required>
<input type="submit" value="GET STARTED" id="submit">
</form>
</section>
</div>
</main>

Why is my hamburger menu not opening when I click on it?

setTimeout(() => {
document.getElementById('me').classList.add('fade');
}, 2000);
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
.menu-wrap{
position: fixed;
top: 0;
right: 0;
z-index: 1;
}
.toggler{
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
height: 50px;
width: 50px;
opacity: 0;
}
.hamburger{
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
}
/*hamburger line*/
.hamburger > div{
position: relative;
width: 100%;
height: 2px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
.hamburger > div:before,
.hamburger > div:after{
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
.hamburger > div:after{
top: 10px;
}
/*show when clicked*/
.menu-wrap .toggler:checked ~ .menu{
visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div{
transform: scale(1);
transition-duration: 0.7s;
}
.menu-wrap .toggler:checked ~ .menu > div > div{
opacity: 1;
transition: 0.4s ease;
}
.toggler:checked + .hamburger > div{
transform: rotate(135deg);
}
/* turn lines into x*/
.toggler:checked + .hamburger > div:before,
.toggler:checked + .hamburger > div:after{
top: 0;
transform: rotate(90deg);
}
/*rotate on hover when checked*/
.toggler:checked:hover + .hamburger > div{
transform: rotate(225deg);
}
.menu-wrap .menu{
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu > div{
background: #000;
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
.menu > div > div{
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
}
.menu > div > div > ul >li{
list-style: none;
padding: 1rem;
color: #fff;
}
.menu > div > div > ul > li > a{
text-decoration: none;
transition: 0.4s ease;
color: #fff;
}
body{
background-color: #1a1a1a;
color: #fff;
font-family: sans-serif;
font-size: 1.3rem;
line-height: 2rem;
}
#first{
font-size: 5rem;
}
#me{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url("images/mecrop2.jpg");
z-index: 3;
display:flex;
align-items: center;
justify-content: center;
transition: opacity 2.5s;
}
.fade#me{
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="mywebsite.css">
</head>
<body>
<div id="me">
<h1 id="first">Hi! I'm Ben.</h1>
</div>
<header>
<div class="name">
<h1>Ben Mikola</h1>
</div>
</header>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li>What I'm Doing Now</li>
<li>Dating/Relationships</li>
<li>Programming</li>
<li>Contact Me!</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
The hamburger menu only works if the first div with the id of "me" is not there. Why does that div interfere with the menu's functionality? I tried changing the z-index of the div. I moved it to the bottom of my HTML. I think it might be the JavaScript messing with it, but I don't know what to change since I don't know much Javascript.

#me have higher z-index then .menu-wrap. So without changing your markup you can simply do: .menu-wrap: z-index: 9; and that's it.

The #me div is overlapping the hamburger menu and stops clicks from reaching the menu. Its width is 100% and its z-index is 3. The simplest way to fix it is to set the z-index for #me to be -1 so that it's behind everything on the page.

How to trigger checkbox from different area?

I'm facing the problem with my dropdown menu (hamburger menu). I want the menu to dissapear when I click on the list item (link). The hamburger menu is created without javaScript, using checkbox. Is it possible to do that in html/css, or only with jQuery or javaScript?
Here is my website: https://gelezhinis.github.io/ritpaslaugos/
#navbar .menu-wrap {
position: fixed;
top: 0;
right: 0;
z-index: 1;
}
#navbar .menu-wrap .toggler {
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
width: 80px;
height: 80px;
opacity: 0;
}
#navbar .menu-wrap .hamburger {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 80px;
height: 80px;
padding: 1.5rem;
margin-top: 0.8rem;
background: inherit;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
#navbar .menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 3px;
background: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Top & Bottom Lines */
#navbar .menu-wrap .hamburger > div:before,
#navbar .menu-wrap .hamburger > div:after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 3px;
background: inherit;
}
/* Moves 3rd Line Down */
#navbar .menu-wrap .hamburger > div:after {
top: 10px;
}
/* Toggler Animation */
#navbar .menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
#navbar .menu-wrap .toggler:checked + .hamburger > div:before,
#navbar .menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
#navbar .menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
/* Show Menu */
#navbar .menu-wrap .toggler:checked ~ .menu {
visibility: visible;
}
#navbar .menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1);
transition-duration: 0.75s;
/* background: #eee; */
}
#navbar .menu-wrap .toggler:checked ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
/* Hide Menu */
#navbar .menu-wrap .menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
#navbar .menu-wrap .menu > div {
background: rgba(24, 39, 51, 0.9);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
#navbar .menu-wrap .menu > div > div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}
#navbar .menu-wrap .menu > div > div > ul > li {
list-style: none;
color: #fff;
font-size: 1.5rem;
padding: 1rem;
}
#navbar .menu-wrap .menu > div > div > ul > li > a {
color: inherit;
text-decoration: none;
text-transform: uppercase;
font-size: 2rem;
transition: color 0.4s ease;
}
#navbar .menu-wrap .menu > div > div > ul > li > a:hover {
color: #777;
}
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul>
<li>Apie</li>
<li>Paslaugos</li>
<li>Salės</li>
<li>Kontaktai</li>
</ul>
</div>
</div>
</div>
</div>

setTimeout(function() { $(".toggler").click(); },1000)
if you want a delay, otherwise just
$(".toggler").click()
Like this
$(".menu a").on("click", function() {
setTimeout(function() {
$(".toggler").click();
}, 1000)
})
#import url('<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght#700&display=swap" rel="stylesheet">');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Noto Serif', serif;
line-height: 1.4rem;
}
a {
text-decoration: none;
}
p {
margin: 0.75rem 0;
}
/* Utility Classes */
.container {
max-width: 1100px;
margin: auto;
overflow: hidden;
}
.text-center {
text-align: center;
}
.text-primary {
color: black;
}
.m-heading {
font-size: 2rem;
margin-bottom: 0.75rem;
line-height: 1.1;
text-transform: uppercase;
}
.btn:hover {
background: #777;
cursor: pointer;
}
.btn:focus {
outline: 0;
}
.btn {
display: inline-block;
color: white;
background: black;
/* border: 2px solid #777; */
border-radius: 4px;
padding: 1rem 2rem;
border: none;
width: 200px;
font-size: 1.5rem;
}
.btn a {
color: inherit;
}
.p-lead {
font-size: 1.3rem;
}
.bg-light {
background: #f4f4f4;
color: black;
}
.py-1 {
padding: 1.5rem 0;
}
.py-2 {
padding: 2rem 0;
}
.py-3 {
padding: 3rem 0;
}
.hall-card {
background: white;
padding: 1rem;
}
/* Navbar */
#navbar {
display: flex;
justify-content: space-between;
position: sticky;
top: 0;
background: black;
color: white;
z-index: 1;
padding: 1rem;
height: 100x;
}
#navbar img {
width: 35%;
margin-left: 1rem;
}
/* #navbar ul {
display: none;
align-items: center;
list-style: none;
}
#navbar ul li a {
color: white;
padding: 0.75rem;
margin: 0 0.25rem;
font-size: 1.5rem;
text-transform: uppercase;
}
#navbar ul li a:hover {
background: #777;
border-radius: 4px;
} */
/* #navbar .menu-wrap {
display: none;
} */
/* #media (max-width: 900px) {
#navbar ul {
display: none;
} */
/* Navbar mobile */
#navbar .menu-wrap {
position: fixed;
top: 0;
right: 0;
z-index: 1;
}
#navbar .menu-wrap .toggler {
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
width: 80px;
height: 80px;
opacity: 0;
}
#navbar .menu-wrap .hamburger {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 80px;
height: 80px;
padding: 1.5rem;
margin-top: 0.8rem;
background: inherit;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
#navbar .menu-wrap .hamburger>div {
position: relative;
flex: none;
width: 100%;
height: 3px;
background: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Top & Bottom Lines */
#navbar .menu-wrap .hamburger>div:before,
#navbar .menu-wrap .hamburger>div:after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 3px;
background: inherit;
}
/* Moves 3rd Line Down */
#navbar .menu-wrap .hamburger>div:after {
top: 10px;
}
/* Toggler Animation */
#navbar .menu-wrap .toggler:checked+.hamburger>div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
#navbar .menu-wrap .toggler:checked+.hamburger>div:before,
#navbar .menu-wrap .toggler:checked+.hamburger>div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
#navbar .menu-wrap .toggler:checked:hover+.hamburger>div {
transform: rotate(225deg);
}
/* Show Menu */
#navbar .menu-wrap .toggler:checked~.menu {
visibility: visible;
}
#navbar .menu-wrap .toggler:checked~.menu>div {
transform: scale(1);
transition-duration: 0.75s;
/* background: #eee; */
}
#navbar .menu-wrap .toggler:checked~.menu>div>div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
#navbar .menu-wrap .menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
#navbar .menu-wrap .menu>div {
background: rgba(24, 39, 51, 0.9);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
#navbar .menu-wrap .menu>div>div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}
#navbar .menu-wrap .menu>div>div>ul>li {
list-style: none;
color: #fff;
font-size: 1.5rem;
padding: 1rem;
}
#navbar .menu-wrap .menu>div>div>ul>li>a {
color: inherit;
text-decoration: none;
text-transform: uppercase;
font-size: 2rem;
transition: color 0.4s ease;
}
#navbar .menu-wrap .menu>div>div>ul>li>a:hover {
color: #777;
}
/* About */
#about {
background: white;
height: 100vh;
color: black;
}
#about .about-content {
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
height: 80%;
padding: 0 2rem;
}
#about .about-content .image img {
width: 100%;
}
#about .about-content button {
display: inline-block;
color: white;
background: black;
border-radius: 4px;
padding: 1rem 2rem;
border: none;
width: 200px;
font-size: 1.5rem;
}
#about .about-content button:hover {
background: #777;
cursor: pointer;
}
#about .about-content button:focus {
outline: 0;
}
#about .about-content button a {
color: inherit;
}
/* Section: Services */
.items {
display: flex;
padding: 1rem;
margin-top: 4rem;
}
#services .items .item {
flex: 1;
text-align: center;
padding: 1rem;
border-right: 2px solid black;
}
#services .items>*:last-child {
border-right: none;
}
/* Section: Halls */
#halls .halls-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
margin-top: 2rem;
}
#halls .halls-container img {
width: 300px;
}
/* #halls .halls-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;
}
.hall {
margin-bottom: 3rem;
}
.hall p {
width: 380px;
}
.hall img {
width: 100%;
} */
/* Section: Contact */
#contact .contacts {
display: flex;
margin-top: 4rem;
}
#contact .contacts .map {
margin-left: 1rem;
}
#contact .map,
#contact .contact-info {
flex: 1;
}
#contact .contact-info {
display: flex;
flex-flow: column;
text-align: center;
}
#contact .contact-info div {
margin: 0.75rem;
}
/* Footer */
#main-footer {
background: black;
color: white;
}
.footer button {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navbar">
<div class="logo">
<img src="img/logo.png" alt="logo">
</div>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger">
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li>Apie</li>
<li>Paslaugos</li>
<li>Salės</li>
<li>Kontaktai</li>
</ul>
</div>
</div>
</div>
</div>
</nav>

How do I stop the overlap of elements in an on hover transition?

In my website I want to be able to allow the user to hover over an image and have the image zoomed in by a transition. I've been able to succeed with the implementation of the transition, however, when the image is being zoomed in, it constantly overlaps the other elements. My current layout is ordered in a grid and the container has been given the attribute overflow:hidden.
I tried to assign each element a z-index value of -1 when its being hovered, but the there is a continuous change between the layers which looks horrible. How do I allow each image to be zoomed in without overlapping into any of the other elements?
Here's my jsfiddle: https://jsfiddle.net/Syed213shah/4u0vh5Lb/
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
width: 100%;
height: 200%;
transition: all 0.5s ease-in-out;
position: relative;
}
.item1:hover {
transform: scale(1.1);
z-index: -1;
}
.item2 {
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
}
.item2:hover {
transform: scale(1.1);
z-index: -1;
}
.item3 {
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
}
.item3:hover {
transform: scale(1.1);
z-index: -1;
}

I think it is more simple to use a pseudo-element or a inner tag (as you want) and scale this element setting its parent (our <a>) with overflow:hidden; to prevent your bug.
In my example I used a pseudoelement. I added these line of code to your CSS (I also commented some lines):
.container a {
overflow: hidden;
}
.container a::after {
height:100%;
width:100%;
content: "";
position: absolute;
transition: all 0.5s ease-in-out;
z-index:-1;
}
.item1::after{
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
}
.item2::after{
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
}
.item3::after{
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
}
.container a:hover::after{
transform: scale(1.1);
}
I didn't touch your HTML.
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
/* https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg */
/* https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000 */
/* https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg */
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
/*background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');*/
width: 100%;
height: 200%;
/*transition: all 0.5s ease-in-out;*/
position: relative;
}
/*.item1:hover {
transform: scale(1.1);
z-index: -1;
}*/
.item2 {
/*background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');*/
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
/*transition: all 0.5s ease-in-out; */
position: relative;
}
/*.item2:hover {
transform: scale(1.1);
z-index: -1;
}*/
.item3 {
/*background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');*/
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
/*transition: all 0.5s ease-in-out; */
position: relative;
}
/* -------------------------- */
/* I added these lines of code */
/* -------------------------- */
.container a {
overflow: hidden;
}
.container a::after {
height:100%;
width:100%;
content: "";
position: absolute;
transition: all 0.5s ease-in-out;
z-index:-1;
}
.item1::after{
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
/*to set a background without repetition and always horizontally center you could use also this syntaxt:
background: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg') 50% top no-repeat transparent;
*/
}
.item2::after{
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
}
.item3::after{
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
}
.container a:hover::after{
transform: scale(1.1);
}
/* -------------------------- */
/* I added these line of code */
/* -------------------------- */
.item1 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 500px 70px;
}
.item2 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 200px 200px;
}
.item3 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 185px 200px;
}
.full-height {
height: 100%;
}
.bottom-height {
height: 100%;
}
h1 {
font-size: 50px;
font-family: Staatliches;
text-align: center;
color: #002a58;
}
#navbar {
background-color: #800020;
position: fixed;
top: -30px;
width: 100%;
transition: top 0.3s;
}
#navbar ul {
height: -30px;
padding: 10px 0 10px 40px;
width: 100%;
}
#navbar li{
float: left;
line-height: 20px;
margin-right: 30px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar li a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
#navbar li a:hover {
background-color: #ddd;
color: black;
}
<body>
<div class="full-height">
<script src="script.js"></script>
<div class="container">
<a class="item1" href="https://www.bbc.co.uk/sport/football" style="text-decoration: none;" >
<h2> Europe's biggest stadium </h2>
</a>
<a class="item2" href="https://www.fcbarcelona.com/en/" style="text-decoration: none;" >
<h2>European Success</h2>
</a>
<a class="item3" href="https://www.fcbarcelona.com/en/football/first-team/news" style="text-decoration: none;" >
<h2>Current Squad</h2>
</a>
</div>
<div id="navbar">
<ul>
<li>Home</li>
<li>Squad</li>
<li>Contact</li>
<li>About</li>
<a2><a>Created by Awais</a></a2>
</ul>
</div>
<h1>FC Barcelona</h1>
</div>
<div class="bottom-height">
</div>
</body>

instead of transform: scale on your images, perhaps using the background-size and background position might give the result you seek with a bit more control of the actual cropping you are already using.
the jsfiddle attached modifies your code with such an example. I did leave the transform scale in place for the text overlay. also note the image containers need a overflow:hidden in order to prevent hover interaction between cells.
here is your css modified accordingly;
body {
background-color: #800020;
}
body, html {
height: 100%;
margin: 0;
}
#box-container {
display: flex;
height: 600px;
width: 75%;
}
.container {
min-height: 500px;
width: 100%;
display: grid;
grid-template-columns: 50% 2fr;
grid-template-rows: 50% 2fr;
overflow: hidden;
position: static;
}
.item1 {
background-image: url('https://pbs.twimg.com/media/D5gQCxCW0AE0skl.jpg');
background-position: 0% 50%;
background-size:200%;
width: 100%;
height: 200%;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item1:hover {
background-size:220%;
background-position: 5% 50%;
}
.item2 {
background-image: url('https://media-public.fcbarcelona.com/20157/0/document_thumbnail/20197/172/175/246/32944044/1.0-10/32944044.jpg?t=1475841685000');
background-position: 0% 50%;
background-size:165%;
grid-column: 2;
grid-row: 2;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item2:hover {
background-position: 5% 50%;
background-size:180%;
}
.item3 {
background-image: url('https://e00-marca.uecdn.es/assets/multimedia/imagenes/2019/10/26/15721062687641.jpg');
background-position: 0% 15%;
background-size:175%;
grid-column: 2;
grid-row: 1;
width: 100%;
height: 400px;
transition: all 0.5s ease-in-out;
position: relative;
overflow: hidden;
}
.item3:hover {
background-position: 5% 15%;
background-size:195%;
}
.item1 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 500px 70px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item2 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 200px 200px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item3 h2 {
font-size: 50px;
position: absolute;
font-family: Staatliches;
text-align: center;
color: white;
text-decoration: none;
padding: 185px 200px;
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.item1:hover h2,
.item2:hover h2,
.item3:hover h2 {
transform: scale(1.1);
}
.full-height {
height: 100%;
}
.bottom-height {
height: 100%;
}
h1 {
font-size: 50px;
font-family: Staatliches;
text-align: center;
color: #002a58;
}
#navbar {
background-color: #800020;
position: fixed;
top: -30px;
width: 100%;
transition: top 0.3s;
}
#navbar ul {
height: -30px;
padding: 10px 0 10px 40px;
width: 100%;
}
#navbar li{
float: left;
line-height: 20px;
margin-right: 30px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar li a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
#navbar li a:hover {
background-color: #ddd;
color: black;
}
#navbar .a2{
float: right;
line-height: 20px;
margin-right: 50px;
padding: 10px 3px;
position: relative;
list-style-type: none;
}
#navbar .a2 a {
font-family: Staatliches;
text-decoration: none;
color: rgb(13, 11, 134);
}
https://jsfiddle.net/w9n6ajq1/

Pure CSS Parallax with JS/jQuery Scroll

I've managed to create a Pure CSS Parallax, however, I'm having some difficulty with scrollTop while overflow: hiddenis applied to html.
The CSS requires overflow: hidden either on the html tag or whatever relevant container and overflow-x: hidden; overflow-y: auto on the body tag or whatever relevant container.
In any case where the overflow is applied, whether on html and body tags or otherwise, scrollTop does not work.
I have been able to detect scroll on the body, either to trigger an alert or to addCLass, but I would like to removeClass once the user scrolls back up to the top of the page.
Here's my code, so far, this is after trying various other normal solutions that work with overflow removed from the html element. This solution only adds the relevant class on scroll.
HTML
<header>
</header>
<div class="parallax">
<div class="background"></div>
<div class="sheet-1">
<h1 class="page-header">My Parallax</h1>
</div>
<div class="sheet-2"></div>
</div>
SASS
\:root
font-size: 10px
*, *::before, *::after
box-sizing: border-box
margin: 0
padding: 0
text-decoration: none
html
overflow-y: auto
body
height: 100vh
overflow-y: auto
overflow-x: hidden
-webkit-overflow-scrolling: touch
perspective: 0.1rem
header
height: 5rem
width: 100%
background: black
opacity: 0
position: fixed
top: 0
left: 0
z-index: 999
transition: opacity 1.5s ease
&.black
opacity: 1
transition: opacity 1.5s ease
.parallax
transform-style: preserve-3d
.background
height: 100vh
width: 100%
background: url('https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg')
background-size: cover
transform: translateZ(-0.1rem) scale(2)
position: relative
[class*='sheet-']
min-height: 100vh
display: flex
align-items: center
.sheet-1
position: absolute
top: 0
left: 0
transform: translateZ(-0.05rem) scale(1.5)
.page-header
color: white
font-size: 4rem
text-align: center
text-transform: uppercase
letter-spacing: 0.15rem
margin: 0 auto
.sheet-2
background: url('https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg') no-repeat center center
background-size: cover
JS
$("body").on("scroll",function(){
$('header').addClass('black');
});
You can view the project on Codepen here.

This situation was able to be resolved by monitoring the scroll event on the container.
In advance,sorry for the poor organization and structuring of the classes. Was roughing through some old code.
Compiled HTML
<header class="header">
<div class="wrapper">
<div class="backdrop" id="backdrop"></div>
<div class="logo" id="pos"></div>
<nav class="navi">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</div>
</header>
<div class="prlx" id="prlx">
<div class="prlx-g">
<div class="prlx-layer prlx-bg"></div>
<div class="prlx-layer prlx-fg sheet">
<h1 class="page-header">My Parallax</h1>
</div>
</div>
<div class="cover sheet" id="secondSection"></div>
</div>
Compiled CSS
:root {
font-size: 10px;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
}
.header {
height: 5rem;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
padding: 0 1rem;
position: relative;
z-index: 5;
}
.wrapper .backdrop {
height: 100%;
width: 100%;
background: black;
opacity: 0;
transition: opacity 0.75s ease-in-out;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.wrapper .backdrop.black {
opacity: 1;
}
.wrapper .logo {
height: 70%;
width: 150px;
background: white;
color: black;
font-size: 2rem;
}
.wrapper .navi ul {
display: flex;
list-style: none;
}
.wrapper .navi ul li {
font-size: 1.8rem;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin-left: 20px;
}
.wrapper .navi ul li a {
color: white;
}
.prlx {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-perspective: 0.1rem;
perspective: 0.1rem;
}
.prlx-g {
height: 100vh;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.prlx-layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.prlx-bg {
height: 100vh;
width: 100%;
background: url("https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg");
background-size: cover;
-webkit-transform: translateZ(-0.1rem) scale(2);
transform: translateZ(-0.1rem) scale(2);
}
.prlx-fg {
-webkit-transform: translateZ(-0.05rem) scale(1.5);
transform: translateZ(-0.05rem) scale(1.5);
}
.sheet {
min-height: 100vh;
display: flex;
align-items: center;
}
.page-header {
color: white;
font-size: 4rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin: 0 auto;
}
.cover {
background: url("https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg") no-repeat center center;
background-size: cover;
color: white;
position: relative;
z-index: 1;
}
Javascript
// Get Scroll Position
var prlx = document.getElementById("prlx");
prlx.onscroll = function prlxAnimation() {
var prlx = document.getElementById("prlx");
var scrollPos = prlx.scrollTop;
var header = document.getElementById("backdrop");
// document.getElementById ("pos").innerHTML = y + "px"
if(scrollPos > 10){
header.classList.add("black");
}
else {
header.classList.remove("black");
}
}
The same pen is still in use on Codepen here.

$(window).scroll(function(){
var scroll= $(window).scrollTop();
<script src="https://code.jquery.com/jquery-3.3.1.min.js"/>
$(window).scroll(function(){
var scroll= $(window).scrollTop();
$(".background").css("background-position","center "+(scroll*0.2)+"px");
});
:root {
font-size: 10px;
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
font-family: sans-serif;
}
.header {
height: 5rem;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
.wrapper {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
width: 100%;
padding: 0 1rem;
position: relative;
z-index: 5;
}
.wrapper .backdrop {
height: 100%;
width: 100%;
background: black;
opacity: 0;
transition: opacity 0.75s ease-in-out;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.wrapper .backdrop.black {
opacity: 1;
}
.wrapper .logo {
height: 70%;
width: 150px;
background: white;
color: black;
font-size: 2rem;
}
.wrapper .navi ul {
display: flex;
list-style: none;
}
.wrapper .navi ul li {
font-size: 1.8rem;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin-left: 20px;
}
.wrapper .navi ul li a {
color: white;
}
.prlx {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-perspective: 0.1rem;
perspective: 0.1rem;
}
.prlx-g {
height: 100vh;
position: relative;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.prlx-layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.prlx-bg {
height: 100vh;
width: 100%;
background: url("https://cdn.stocksnap.io/img-thumbs/960w/LWRWOL8KSV.jpg");
background-size: cover;
-webkit-transform: translateZ(-0.1rem) scale(2);
transform: translateZ(-0.1rem) scale(2);
}
.prlx-fg {
-webkit-transform: translateZ(-0.05rem) scale(1.5);
transform: translateZ(-0.05rem) scale(1.5);
}
.sheet {
min-height: 100vh;
display: flex;
align-items: center;
}
.page-header {
color: white;
font-size: 4rem;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.15rem;
margin: 0 auto;
}
.cover {
background: url("https://cdn.stocksnap.io/img-thumbs/960w/P3IB71W6GW.jpg") no-repeat center center;
background-size: cover;
color: white;
position: relative;
z-index: 1;
}
<header class="header">
<div class="wrapper">
<div class="backdrop" id="backdrop"></div>
<div class="logo" id="pos"></div>
<nav class="navi">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</nav>
</div>
</header>
<div class="prlx" id="prlx">
<div class="prlx-g">
<div class="prlx-layer prlx-bg"></div>
<div class="prlx-layer prlx-fg sheet">
<h1 class="page-header">My Parallax</h1>
</div>
</div>
<div class="cover sheet" id="secondSection"></div>
</div>
hope this code works

We Keep Coding

JavaScript is the programming language of the Web.

Full screen overlay menu with HTML,CSS,JavaScript - javascript

Related

Click checked pure hamburger menu on window/document click

Why is my hamburger menu not opening when I click on it?

How to trigger checkbox from different area?

How do I stop the overlap of elements in an on hover transition?

Pure CSS Parallax with JS/jQuery Scroll

Categories

Resources