ARTICLE AD BOX
What I'd like is for the image inside my div to go from taking up the whole page via absolute position to sitting on the side with another div next to it with no absolute position. So that when you open the page the image fills your screen but on scroll it "shrinks" away revealing the other content. Honestly not sure why it isn't doing anything
Note: this is a WIP site so yes I know everything else is janky.
body {
background-color: #eeeee4;
cursor: url(''), auto;
}
.bg-img {
background-image: url('');
background-size: 15%;
}
.top-banner {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
background-color: white;
}
.banner {
width: fit-content;
background-color: grey;
margin: auto;
}
.banner-title {
text-align: center;
}
.title, .title:visited, .title:hover, .title:active {
text-align: center;
font-size: 10vw;
font-weight: bold;
font-family: "Parisienne", cursive;
text-decoration: none;
color: #c79107;
}
.navigation {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-nav {
display: flex;
flex-direction: row;
padding: 0.3vw;
}
.right-nav {
display: flex;
flex-direction: row;
padding: 0.3vw;
}
.click-nav, .click-nav:visited {
margin: 0.3vw;
font-size: 1.5vw;
font-weight: bold;
font-family: "Roboto Mono";
text-decoration: none;
color:#3a3a3a;
transition: color 0.3s;
}
.click-nav:hover {
color: #c79107;
}
.click-nav:active {
color:#3a3a3a;
}
.art-contain {
width: 100vw;
background-color: red
}
.art {
display: flex;
flex-direction: row;
}
.splashart {
position: absolute;
top: 5;
left: 20;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.splashart img {
height: 100%;
width: 100vw;
object-fit: cover;
transition: all linear .5s
}
.splashart.thin {
flex: 5;
justify-content: center;
align-items: center;
overflow: hidden;
}
.splashart.thin img {
height: 100%;
width: 100%;
object-fit: cover
}
.art-right {
flex: 1;
background-color: blue;
}
.overlay-text {
position: sticky;
width: fit-content;
bottom: 5vh;
left: 5vh;
background-color: purple
}
.overlay-title {
}
.overlay-subtitle {
}
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-K7X3FHJYH4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-K7X3FHJYH4');
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5QJCL2X');</script>
<!-- End Google Tag Manager -->
<title>Gallery</title>
<link rel="icon" type="image/x-icon" href="https://dauphinduegg.neocities.org/assets/visuals/faberge_egg_logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
<link rel="stylesheet" href="/Gallery/gallery.css">
</head>
<body class="bg-img">
<div class="top-banner">
<div class="banner">
<div class="banner-title">
<a class="title" href="https://dauphinduegg.com/">
Dauphin Du Egg
</a>
</div>
<div class="navigation">
<div class="left-nav">
<a class="click-nav" href="">About</a>
<a class="click-nav" href="">Installations</a>
<a class="click-nav" href="https://dauphinduegg.com/Blog">Blog</a>
</div>
<div class="right-nav">
<a class="click-nav" href="">Commissions</a>
<a class="click-nav" href="https://dauphinduegg.com/Shop/">Shop</a>
</div>
</div>
</div>
</div>
<div class="art-contain">
<div class="art">
<div class="splashart">
<img src="https://dauphinduegg.neocities.org/Gallery/assets/dragonhoard.avif">
</div>
<div class="art-right">
<div class="nav-box">
<div class="box-splash">
<a></a>
</div>
<div class="box-title">Explore Paintings</div>
</div>
<div class="nav-box">
<div class="box-splash">
<a></a>
</div>
<div class="box-title">Explore Sculptures</div>
</div>
<div class="nav-box">
<div class="box-splash">
<a></a>
</div>
<div class="box-title">Explore Prints</div>
</div>
<div class="nav-box">
<div class="box-splash">
<a></a>
</div>
<div class="box-title">Explore Digital</div>
</div>
<div class="nav-box">
<div class="box-splash">
<a></a>
</div>
<div class="box-title">Explore Animation</div>
</div>
</div>
</div>
<div class="overlay-text">
<div class="overlay-title">By Cassian Feliciano</div>
<div class="overlay-subtitle">[blurb]</div>
</div>
</div>
<div class="store-ad"></div>
<div class="footer">
<div class="footer-top">
<div class="footer-logo">
<img src="https://dauphinduegg.neocities.org/assets/visuals/faberge_egg_logo.png">
</div>
<div class="footer-nav">
<ul>
<li>Home</li>
<li>Commissions</li>
<li>Shop</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="footer-middle"> <hr> </div>
<div class="footer-bottom">
<div class="socials">
<ul>
<li class="social"><i class="fa-regular fa-cup-togo"></i></li>
<li class="social"><i class="fa-brands fa-bluesky"></i></li>
<li class="social"><i class="fa-solid fa-paw-claws"></i></li>
<li class="social"><i class="fa-solid fa-house"></i></li>
</ul>
</div>
<div class="copyright">© Copyright 2025 - Cassian Feliciano</div>
</div>
</div>
<script type="text/javascript">
window.addEventListener("scroll", function() {
const splashart = document.getElementById("splashart");
// Check if the user has scrolled more than 50 pixels from the top
if (window.scrollY > 50) {
splashart.classList.add("thin");
} else {
splashart.classList.remove("thin");
}
});
</script>
</body>
</html>
28.2k15 gold badges61 silver badges87 bronze badges
3
You are very close to this but just you need to update your script tag as below:
<script type="text/javascript"> window.addEventListener("scroll", function() { const splashart = document.getElementsByClassName("splashart"); // Check if the user has scrolled more than 50 pixels from the top if (window.scrollY > 50) { splashart[0].classList.add("thin"); } else { splashart[0].classList.remove("thin"); } }); </script>you missed to give index to access classlist of element.
here is also a working code:
body {
background-color: #eeeee4;
cursor: url(''), auto;
}
.bg-img {
background-image: url('');
background-size: 15%;
}
.top-banner {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
background-color: white;
}
.banner {
width: fit-content;
background-color: grey;
margin: auto;
}
.banner-title {
text-align: center;
}
.title, .title:visited, .title:hover, .title:active {
text-align: center;
font-size: 10vw;
font-weight: bold;
font-family: "Parisienne", cursive;
text-decoration: none;
color: #c79107;
}
.navigation {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.left-nav {
display: flex;
flex-direction: row;
padding: 0.3vw;
}
.right-nav {
display: flex;
flex-direction: row;
padding: 0.3vw;
}
.click-nav, .click-nav:visited {
margin: 0.3vw;
font-size: 1.5vw;
font-weight: bold;
font-family: "Roboto Mono";
text-decoration: none;
color:#3a3a3a;
transition: color 0.3s;
}
.click-nav:hover {
color: #c79107;
}
.click-nav:active {
color:#3a3a3a;
}
.art-contain {
width: 100vw;
background-color: red
}
.art {
display: flex;
flex-direction: row;
}
.splashart {
position: absolute;
top: 5;
left: 20;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.splashart img {
height: 100%;
width: 100vw;
object-fit: cover;
transition: all linear .5s
}
.splashart.thin {
flex: 5;
justify-content: center;
align-items: center;
overflow: hidden;
}
.splashart.thin img {
height: 100%;
width: 100%;
object-fit: cover
}
.art-right {
flex: 1;
background-color: blue;
}
.overlay-text {
position: sticky;
width: fit-content;
bottom: 5vh;
left: 5vh;
background-color: purple
}
.overlay-title {
}
.overlay-subtitle {
}
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-K7X3FHJYH4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-K7X3FHJYH4');
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5QJCL2X');</script>
<!-- End Google Tag Manager -->
<title>Gallery</title>
<link rel="icon" type="image/x-icon" href="https://dauphinduegg.neocities.org/assets/visuals/faberge_egg_logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Parisienne&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/fontawesome/css/all.css">
<link rel="stylesheet" href="/Gallery/gallery.css">
</head>
<body class="bg-img">
<div class="top-banner">
<div class="banner">
<div class="banner-title">
<a class="title" href="https://dauphinduegg.com/">
Dauphin Du Egg
</a>
</div>
<div class="navigation">
<div class="left-nav">
<a class="click-nav" href="">About</a>
<a class="click-nav" href="">Installations</a>
<a class="click-nav" href="https://dauphinduegg.com/Blog">Blog</a>
</div>
<div class="right-nav">
<a class="click-nav" href="">Commissions</a>
<a class="click-nav" href="https://dauphinduegg.com/Shop/">Shop</a>
</div>
</div>
</div>
</div>
<div class="art-contain">
<div class="art">
<div class="splashart">
<img src="https://dauphinduegg.neocities.org/Gallery/assets/dragonhoard.avif">
</div>
<div class="art-right">
<div class="nav-box">
<div class="box-splash">
<a></a>
</div>
<div class="box-title">Explore Paintings</div>
</div>
<div class="nav-box">
<div class="box-splash">
<a></a>
</div>
<div class="box-title">Explore Sculptures</div>
</div>
<div class="nav-box">
<div class="box-splash">
<a></a>
</div>
<div class="box-title">Explore Prints</div>
</div>
<div class="nav-box">
<div class="box-splash">
<a></a>
</div>
<div class="box-title">Explore Digital</div>
</div>
<div class="nav-box">
<div class="box-splash">
<a></a>
</div>
<div class="box-title">Explore Animation</div>
</div>
</div>
</div>
<div class="overlay-text">
<div class="overlay-title">By Cassian Feliciano</div>
<div class="overlay-subtitle">[blurb]</div>
</div>
</div>
<div class="store-ad"></div>
<div class="footer">
<div class="footer-top">
<div class="footer-logo">
<img src="https://dauphinduegg.neocities.org/assets/visuals/faberge_egg_logo.png">
</div>
<div class="footer-nav">
<ul>
<li>Home</li>
<li>Commissions</li>
<li>Shop</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="footer-middle"> <hr> </div>
<div class="footer-bottom">
<div class="socials">
<ul>
<li class="social"><i class="fa-regular fa-cup-togo"></i></li>
<li class="social"><i class="fa-brands fa-bluesky"></i></li>
<li class="social"><i class="fa-solid fa-paw-claws"></i></li>
<li class="social"><i class="fa-solid fa-house"></i></li>
</ul>
</div>
<div class="copyright">© Copyright 2025 - Cassian Feliciano</div>
</div>
</div>
<script type="text/javascript">
window.addEventListener("scroll", function() {
const splashart = document.getElementsByClassName("splashart");
// Check if the user has scrolled more than 50 pixels from the top
if (window.scrollY > 50) {
splashart[0].classList.add("thin");
} else {
splashart[0].classList.remove("thin");
}
});
</script>
</body>
</html>
Explore related questions
See similar questions with these tags.
