I'm trying to create a transition between content and this is the idea for now:
I have two divs:
The first contains an image that occupies the width and height of the browser, plus a single button, these are the introduction to the web page;
The second contains the actual content of the website;
The idea is that when I click the button, the image zoom in, and after the transition I get the web page content.
My code so far:
const btnEl = document.querySelector(".btn");
const trailerContainerEl = document.querySelector(".trailer-container");
const introContainerEl = document.querySelector(".intro-container");
btnEl.addEventListener("click", () => {
trailerContainerEl.classList.remove("active");
});
btnEl.addEventListener("click", () => {
introContainerEl.classList.add("disappear");
});
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
}
.intro-container {
width: 100%;
}
.intro-container img {
width: 100%;
height: 100vh;
object-fit: fill;
object-position: center;
}
.intro-container.disappear {
width: 200%;
height: 200%;
transition: transform 1s;
-ms-transform: scale(2.5);
/* IE 9 */
-webkit-transform: scale(2.5);
/* Safari 3-8 */
transform: scale(2.5);
display: flex;
justify-content: center;
align-items: center;
}
button.btn {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 15px 20px;
background: #2a78d7;
font-size: 18px;
font-weight: 700;
border-radius: 12px;
cursor: pointer;
color: white;
text-transform: uppercase;
border: 3px solid #20323e;
text-shadow: 1px 1px 4px black;
}
.trailer-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgb(228, 223, 224);
opacity: 1;
transition: opacity 2s;
}
.trailer-container.active {
visibility: hidden;
opacity: 0;
}
form {
margin: 250px;
}
<body>
<div class="intro-container">
<img src="https://www.hoganbakery.com.my/wp-content/uploads/2019/09/lion-office-tower.jpg" alt="">
<button class="btn">Click to choose items</button>
</div>
<div class="trailer-container active">
<form action="" name="myForm">
<section class="first-section">
<h3>Choose Item:</h3>
<div>
<input type="number" name="bread" id="bread" placeholder="How many?">
<label for="">Bread</label>
</div>
<div>
<input type="number" name="croissant" id="croissant" placeholder="How many?">
<label for="">Croissant</label>
</div>
</section>
<section class="third-section">
<h3>Do you have account</h3>
<div>
<input type="radio" name="" id="yes">
<label for="">I have account</label>
</div>
<div>
<input type="radio" name="" id="no">
<label for="">I don't have account</label>
</div>
</section>
<section class="commands">
<input type="button" id="submit" value="Submit">
</section>
</form>
</div>
</body>
My code 'sort of' does this, but what I'm trying to achieve is a bit more complex.
I found a great video that describes my vision, here is the link, from the 21st second https://youtu.be/lRVEOoSA5EI?t=21 .
As shown in the video, I would like to have a similar transition after clicking the button: hold for a second or two, 'zoom in' in a smooth way(almost to look like it's going through the door of the image, like it enters the shop), then my content would appear.
Another problem I have with this code(that I didn't solve by now): because I have overflow:hidden on body element, and position: fixed on .trailer-container class, I can't scroll down my web page.
I hope this is not too much, I realize it is not that easy to achieve.
I'm learning JavaScript, vanilla, and this is some little project I need to make.
you need to scale, and add opacity of your image, with css animation, and start this animation and opacity when we click on it, test this code
/** style.css :*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: green;
height: 100vh;
}
p{
text-align: center;
font-size: 70px;
}
#overflow-hide-transition{
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
}
#img-transition {
width: 100%;
height: 100%;
background-color: red;
display: flex;
justify-content: center;
align-items: center;
font-size: 70px;
flex-direction: column;
}
button {
width: 250px;
height: 50px;
font-size: 30px;
}
#keyframes presentationTransition{
to{
transform: scale(5);
opacity: 0;
}
}
<!-- index.html --> :
<!DOCTYPE html>
<html lang="FR-fr">
<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>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body >
<p>This is the body</p>
<div id="overflow-hide-transition">
<div id="img-transition" >
test for zoom
<button id="boutton-transition"> clique</button>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
/** script.js: */
const overflowHide = document.getElementById('overflow-hide-transition')
const imgTransition = document.getElementById('img-transition')
const buttonTransition = document.getElementById('boutton-transition')
const seconde = 3;
document.addEventListener('click', ()=>{
imgTransition.style.cssText = `animation: presentationTransition ${seconde}s linear `
setTimeout(() => {
overflowHide.style.display= "none"
}, seconde *1000);
})
Related
I have attached a simple code snippet for a website. When hovering over the underlined words, images are supposed to appear. How can I prevent those images from "jumping out" of their container so that they will always be visible and don't leave the screen?
The images are supposed to appear at the position of the correlating word.
I hope you understand the problem I've described here.
#charset "UTF-8";
/* CSS Document */
html, body {
margin: 0;
background-color: black;
}
#wrapper {
margin: 0;
position: fixed;
width: 100%;
height: 100%;
overflow: scroll;
}
.section {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
text-align: left;
position: relative;
}
p {
color: white;
font-family: Helvetica, sans-serif;
font-size: 36px;
margin-left: 100px;
margin-right: 100px;
text-align: left;
display: block;
width: 50%;
}
.gallery-image {
position: absolute;
display: none;
transform: translate(0,calc(1em - 50%));
max-width: 50vw;
max-height: 75vh;
height: auto;
z-index: 1000;
}
.gallery-link {
position: relative;
text-decoration: underline;
}
.gallery-link:hover > .gallery-image{
display: flex;
z-index: 1000;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div class="section">
<p>Title<br>
Nor is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain
<span class="gallery-link"><img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/590_Madison_Ave_IBM_08.jpg" >
vulnerability </span> of any.<br>
The once <span class="gallery-link">colorful rug<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Ornamentglas_B_-_Ansicht_1.jpg/1000px-Ornamentglas_B_-_Ansicht_1.jpg"></span> has been <span class="gallery-link">broken down<img class="gallery-image" src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Cocooningâ“’Shin%2C_Kyungsub.jpg" ></span> but is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain.<br>
End Quote
</p>
</div>
</div>
</body>
</html>
You can try to modify your .gallery-image with top and remove transform too. Your final CSS will be like this
.gallery-image {
position: absolute;
display: none;
max-width: 50vw;
max-height: 75vh;
height: auto;
z-index: 1000;
top: 100%; /*Here is the main change*/
}
You can check the sandbox here https://jsfiddle.net/kqoh2Lat/
The final result
I created a menu for a web project, but I have a problem with the javascript side. I would like to extend the div container if it's clicked. And vice versa, I would like to shorten it if I click everywhere except on it. Actually, the program is able to shorten and extend the div menu but I can't manage the events :
if div is small -> extend it by clicking on it
if div is big -> shorten it by clicking everywhere except on it
There is my program :
const menu = document.querySelector('.wrapper')
const offClick = () => {
menu.classList.toggle('active')
document.removeEventListener('click', offClick)
}
const handleClick = (e) => {
e.stopPropagation()
menu.classList.toggle('.active')
if (menu.classList.contains('.active')){
document.addEventListener('click', offClick)
}
}
menu.addEventListener('click', handleClick)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #10131c;
}
.wrapper{
position: absolute;
width: 105px;
height: 105px;
background-color: #212532;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
transition-delay: 0.8s;
}
.wrapper.active{
width: 300px;
height: 300px;
transition-delay: 0s;
}
.wrapper span{
position: absolute;
width: 10.5px;
height: 10.5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 50%;
transform: translate(calc(18px * var(--x)), calc(18px * var(--y)));
transition: transform 0.5s, width 0.5s, height 0.5s;
background-color: 0.5s;
transition-delay: calc(0.1s * var(--i));
}
.wrapper.active span{
width: 67.5px;
height: 67.5px;
background-color: #333849;
transform: translate(calc(90px * var(--x)), calc(90px * var(--y)))
}
.wrapper span ion-icon{
transition: 0.5s;
font-size: 0em
}
.wrapper.active span ion-icon{
font-size: 2.025em;
color: #fff;
}
.wrapper.active span:hover ion-icon{
color: #d33d32;
filter: drop-shadow(0 0 3px #d33d32)
}
<!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>WebSite</title>
<link rel="stylesheet" href="styles/style.css" type="text/css">
</head>
<body class="body">
<div class="wrapper">
<span style = "--i:0;--x:-1;--y:0;"><ion-icon name="code-outline"></ion-icon></span>
<span style = "--i:1;--x:1;--y:0;"><ion-icon name="moon-outline"></ion-icon></span>
<span style = "--i:2;--x:0;--y:-1;"><ion-icon name="bulb-outline"></ion-icon></span>
<span style = "--i:3;--x:0;--y:1;"><ion-icon name="chatbubbles-outline"></ion-icon></span>
<span style = "--i:4;--x:1;--y:1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style = "--i:5;--x:-1;--y:-1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style = "--i:6;--x:0;--y:0;"><ion-icon name="ribbon-outline"></ion-icon></ion-icon></span>
<span style = "--i:7;--x:-1;--y:1;"><ion-icon name="rocket-outline"></ion-icon></span>
<span style = "--i:8;--x:1;--y:-1;"><ion-icon name="stats-chart-outline"></ion-icon></span>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<script src="script/script.js"></script>
</body>
</html>
Thank you for your help !
Firstly, note that amending event handlers within an event handler is normally a code smell. There is usually a much better way to do what you need to achieve.
In this case you need to attach each of your event handlers just the once. handleClick() should be attached to the .wrapper so that it expands when clicked, and offClick() should be attached to the document so that it contracts the .wrapper.
const menu = document.querySelector('.wrapper');
const offClick = () => menu.classList.remove('active');
const handleClick = (e) => {
e.stopPropagation();
menu.classList.add('active'); // or .toggle('active')
}
menu.addEventListener('click', handleClick);
document.addEventListener('click', offClick);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #10131c;
}
.wrapper {
position: absolute;
width: 105px;
height: 105px;
background-color: #212532;
border-radius: 10px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
transition-delay: 0.8s;
}
.wrapper.active {
width: 300px;
height: 300px;
transition-delay: 0s;
}
.wrapper span {
position: absolute;
width: 10.5px;
height: 10.5px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border-radius: 50%;
transform: translate(calc(18px * var(--x)), calc(18px * var(--y)));
transition: transform 0.5s, width 0.5s, height 0.5s;
background-color: 0.5s;
transition-delay: calc(0.1s * var(--i));
}
.wrapper.active span {
width: 67.5px;
height: 67.5px;
background-color: #333849;
transform: translate(calc(90px * var(--x)), calc(90px * var(--y)))
}
.wrapper span ion-icon {
transition: 0.5s;
font-size: 0em
}
.wrapper.active span ion-icon {
font-size: 2.025em;
color: #fff;
}
.wrapper.active span:hover ion-icon {
color: #d33d32;
filter: drop-shadow(0 0 3px #d33d32)
}
<body class="body">
<div class="wrapper">
<span style="--i:0;--x:-1;--y:0;"><ion-icon name="code-outline"></ion-icon></span>
<span style="--i:1;--x:1;--y:0;"><ion-icon name="moon-outline"></ion-icon></span>
<span style="--i:2;--x:0;--y:-1;"><ion-icon name="bulb-outline"></ion-icon></span>
<span style="--i:3;--x:0;--y:1;"><ion-icon name="chatbubbles-outline"></ion-icon></span>
<span style="--i:4;--x:1;--y:1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style="--i:5;--x:-1;--y:-1;"><ion-icon name="duplicate-outline"></ion-icon></span>
<span style="--i:6;--x:0;--y:0;"><ion-icon name="ribbon-outline"></ion-icon></span>
<span style="--i:7;--x:-1;--y:1;"><ion-icon name="rocket-outline"></ion-icon></span>
<span style="--i:8;--x:1;--y:-1;"><ion-icon name="stats-chart-outline"></ion-icon></span>
</div>
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
First of all it looks really nice :)
As far as the javascript code you could keep it simple by adding the event listener on the whole body and checking the target of your click event has a parent with a 'wrapper' class, by using the closest method.
document.addEventListener('click',(event)=>{
if(event.target.closest(".wrapper")){
menu.classList.add('active')
}else{
menu.classList.remove('active')
}
})
I've a code that does parallax outline scrolling, so when you scroll the page with a black background, the white text moves horizontally (which is positioned behind the image) along with the red text which is over the image.
This is how it looks like:
I understand the scrolling javascript code but what I don't get is that why the red text is at the boundary of the image? And if it's positioned above the image then why it's only showing the text under the image boundary only and not outside it just like the white one (which is positioned backward)
I'm a backend developer and I'm new to frontend so struggling a bit here. Here's my code...
Index.html :
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 2000px;
overflow-x: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
background: #0f0f0f;
}
.container {
max-width: 600px;
margin: 200px auto;
width: 100%;
padding: 10px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
overflow: hidden;
z-index: 1;
background-image: url("hero-img.jpeg");
background-size: cover;
background-position: center;
}
.text {
color: white;
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -50%;
transform: translateY(-50%);
z-index: 0;
text-transform: uppercase;
white-space: nowrap;
}
.text.text-dark {
color: red;
}
.text span {
position: relative;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax Text On Scroll</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="smooth-scroll-wrapper">
<div class="content">
<div class="container">
<div class="image-container">
<h2 class="text text-dark">
<span class="parallax-title">
the red text here
</span>
</h2>
</div>
<h2 class="text">
<span class="parallax-title">
the white text here
</span>
</h2>
</div>
</div>
</div>
<script>
let atScroll = false;
let parallaxTitle = document.querySelectorAll(".parallax-title");
const scrollProgress = () => {
atScroll = true;
};
const raf = () => {
if (atScroll) {
parallaxTitle.forEach((element, index) => {
element.style.transform = "translateX(" + window.scrollY / 12 + "%)";
});
atScroll = false;
}
requestAnimationFrame(raf);
};
requestAnimationFrame(raf);
window.addEventListener("scroll", scrollProgress);
</script>
</body>
</html>
You need to commented highlight css property on class .image-container{overflow: hidden; z-index: 1;} and increase top:50% to top:70% on class .text.text-dark{top: 70%;}
Note: Check on Full page
let atScroll = false;
let parallaxTitle = document.querySelectorAll(".parallax-title");
const scrollProgress = () => {
atScroll = true;
};
const raf = () => {
if (atScroll) {
parallaxTitle.forEach((element, index) => {
element.style.transform = "translateX(" + window.scrollY / 12 + "%)";
});
atScroll = false;
}
requestAnimationFrame(raf);
};
requestAnimationFrame(raf);
window.addEventListener("scroll", scrollProgress);
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 2000px;
overflow-x: hidden;
font-family: "Monument Extended", Arial, Helvetica, sans-serif;
background: #0f0f0f;
}
.container {
max-width: 600px;
margin: 200px auto;
width: 100%;
padding: 10px 0px;
position: relative;
}
.image-container {
padding-bottom: 100%;
background: black;
position: relative;
/* overflow: hidden; */
/* z-index: 1; */
background-image: url("https://i.stack.imgur.com/fcbpv.jpg?s=48&g=1");
background-size: cover;
background-position: center;
}
.text {
color: white;
margin: 0;
font-size: 64px;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: -50%;
transform: translateY(-50%);
z-index: 0;
text-transform: uppercase;
white-space: nowrap;
}
.text.text-dark {
color: red;
top: 70%;
}
.text span {
position: relative;
display: block;
}
<div class="smooth-scroll-wrapper">
<div class="content">
<div class="container">
<div class="image-container">
<h2 class="text text-dark">
<span class="parallax-title">
the red text here
</span>
</h2>
</div>
<h2 class="text">
<span class="parallax-title">
the white text here
</span>
</h2>
</div>
</div>
</div>
I'm new to javascript and am facing issues with auto-playing video and stopping video upon opening and closing the modal.
Currently this script allows me to close the modal if I click outside of the video control and has to be fixed as well. It is intended to be able to play/pause the video on click of the video body, and modal to be closed when clicked out of the video.
At the same time, upon opening the modal, the video should be able to play automatically, likewise while closing the modal, video stop.
I am not familiar with the functions and if anyone could possibly suggest any improvement on the current script?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<style>
.trailer{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
opacity: 0;
}
.trailer.active{
visibility: visible;
opacity: 1;
}
.trailer #mainvid{
position: relative;
max-width: 1200px;
outline: none;
}
.trailer-close{
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
filter: invert(1);
max-width: 32px;
}
#media (max-width: 991px) {
.trailer #mainvid{
max-width: 90%;
}
}
</style>
</head>
<body>
<div class="banner">
<div class="content">
<p>Testing Testing 1 2 3</p>
<a href="#" onclick="toggle();">
<button>Play Video</button>
</a>
</div>
</div>
<div class="trailer" id="main">
<video id="mainvid" src="/video/products/container accomodation/main/main video.mp4" controls="true"></video>
</div>
<script type="text/javascript">
function toggle(){
var trailer = document.querySelector(".trailer")
trailer.classList.toggle("active");
video.pause();
video.currentTime = 0;
}
window.addEventListener('mouseup',function(){
var traileractive = document.querySelector(".trailer.active")
traileractive.classList.toggle("active");
})
</script>
</body>
</html>
To handle states of the video player, we can simply use the play pause functions of HTMLMediaElement. Use this code, it handles all the desired functionalities.
var videoElem = document.querySelector(".trailer video");
var trailerElem = document.querySelector(".trailer")
function toggle() {
trailerElem.classList.add("active");
videoElem.play();
videoElem.currentTime = 0;
}
function handleTrailerClick(event) {
if (event && event.target && event.target.nodeName !== "VIDEO") {
videoElem.pause();
trailerElem.classList.remove('active');
}
}
function handleVideoClick(event) {
event.preventDefault();
videoElem.paused ? videoElem.play() : videoElem.pause();
}
document.querySelector("#playButton").addEventListener('click', toggle)
document.querySelector(".trailer").addEventListener('click', handleTrailerClick);
document.querySelector(".trailer video").addEventListener('click', handleVideoClick);
.trailer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background: rgba(0, 0, 0, 0.7);
width: 100%;
height: 100%;
display: none;
justify-content: center;
align-items: center;
}
.trailer.active {
display: flex;
}
.trailer #mainvid {
position: relative;
max-width: 1200px;
outline: none;
}
.trailer-close {
position: absolute;
top: 30px;
right: 30px;
cursor: pointer;
filter: invert(1);
max-width: 32px;
}
#media (max-width: 991px) {
.trailer #mainvid {
max-width: 90%;
}
}
<div class="banner">
<div class="content">
<p>Testing Testing 1 2 3</p>
<button id="playButton">Play Video</button>
</div>
</div>
<div class="trailer" id="main">
<video id="mainvid" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4" controls="true"></video>
</div>
I'm struggling to hide the navbar on scroll down. I know how to do it, but just because of some silly mistake I'm unable to do so, and can't figure out what the issue is.
Here's the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div id="navbar">
<div id="logo">
<a href="#">
<h1>My logo</h1>
</a>
</div>
<ul id="menu">
<li><a class="link-button" href="#">HOME</a></li>
<li><a class="link-button" href="#">ARTICLES</a></li>
<li><a class="link-button" href="#">PROJECTS</a></li>
<li><a class="link-button" href="#">AUTHOR</a></li>
<li><a class="link-button" href="#">CONTACT</a></li>
</ul>
</div>
<div id="welcome">
<h1 id="welcome-text">My Portfolio</h1>
</div>
<div class="container">
</div>
<!-- Here script for hidding navbar on scroll down -->
<script>
window.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(window.pageYOffset > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
</script>
</body>
</html>
And here's the full css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
height: 100vh;
perspective: 1px;
transform-style: preserve-3d;
overflow-x: hidden;
overflow-y: auto;
}
html{
overflow: hidden;
}
#navbar{
position: sticky;
width: 100%;
top: 0;
transition: background 0.5s;
background-color: transparent;
z-index: 2;
}
#navbar #logo{
float: left;
margin: 10px;
}
#navbar #logo a{
font-size: 155%;
color: #ffffff;
text-decoration: none;
}
#navbar ul{
float: right;
justify-content: space-around;
list-style: none;
align-items: center;
padding: 20px;
}
#navbar ul li{
display: inline-block;
}
/* === Here I'm changing the display property of the navbar to none to make it disappear. === */
#navbar.navbar-scroll{
display: none;
}
.link-button{
display: block;
text-align: center;
margin: 0 15px;
font-size: 89%;
color: #ffffff;
text-decoration: none;
}
.link-button::after{
content: '';
display: block;
width: 0;
height: 2px;
margin-top: 2px;
background: #ffffff;
transition: width .3s;
}
.link-button:hover::after{
width: 100%;
transition: width .3s;
}
#welcome{
height: 100vh;
width: 100vw;
box-sizing: border-box;
}
#welcome::before{
content: "";
height: 100vh;
width: 100vw;
top: 0;
left: 0;
background: linear-gradient(#0000008e, #0000008e), url('static/bc22.jpg');
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
z-index: -1;
transform: translateZ(-2px) scale(3);
}
#welcome-text{
color: #ffffff;
position: absolute;
top: 50%;
left: 26%;
transform: translate(-50%, -50%);
/* text-align: center; */
font-size: 600%;
}
.container{
background-color: #1f1f1f;
height: 1000px;
}
In the CSS I've also tried changing the background colour of the navbar on scroll (in the #navbar.navbar-scroll), but it ain't working as well. So most probably the error is in the javascript I think.
If there's a better way of hiding the navbar on scroll then that's welcomed as well.
Thanks for your time.
Actually the problem lies under your HTML overflow: hidden;. So when you set your HTML overflow to hidden, the window.addEventListener("scroll", function () {}) will never invoke, because window will never scroll at all. So to fix this you should either remove html{overflow: hidden;} from your styles or add your event listener to listen to your body element instead, which is not recommended.
From your CSS, it seems your goal is to have the body as the scroll container and not <HTML> itself.
Something like this should work as your JavaScript:
document.body.addEventListener("scroll", function(){
let Navbar = document.getElementById('navbar');
if(document.body.scrollTop > 0){
Navbar.classList.add("navbar-scroll");
}else{
Navbar.classList.remove("navbar-scroll");
}
});
Pretty much every tag which can have children can be scrollable if you define it in your CSS. That means you will have to listen to the right element in JS too.