问题
I'm trying to build my personal website where I have:
- A canvas element that's 100% screen height and width, with z-index -1
- The normal content in divs and section tags, with z-index 0
- The nav element that's at the highest z-index on the page
This arrangement allows me to have the canvas as the background of the entire website, it doesn't scroll because it's fixed. The nav is fixed as well so it stays at the top of the page with scrolling. (By "fixed" I mean "position: fixed" set in CSS on that element)
The nav has a transparent background, so it's "see-through", which shows the canvas content behind it, like this: navbar and canvas background (sorry I don't enough points to embed images yet)
However, because the nav is transparent and fixed, content gets shown behind it on scroll, something like this image: content goes behind nav
I would like to have the content fade as it goes behind the nav's bottom edge, but I would also like to keep the nav transparent in order to show the canvas in the background. Here's what the fade would ideally look like: text fade example (taken from https://www.youtube.com/watch?v=-vbLeY-eDkQ but it uses text clip which doesn't apply to my case)
EDIT: Hiding the content without a fade is fine as well, the target is to make the content not appear beneath the transparent nav whilst showing the background canvas. It can be an abrupt cut-off instead of a gradient fade because after some more research I've found the fade effect I'm looking for isn't widely available or supported on all elements across browsers.
I have tried checking solutions from here: Hide scrollable content behind transparent fixed position divs when scrolling the page? but they use a background image, which makes it relatively simpler. In my case, it's a canvas and the content of the canvas changes with time.
Here's my current webpage structure (Note: the CSS classes are from TailwindCSS but the naming is self-explanatory. I'm also using React)
<body class="bg-dark m-0">
<nav id="nav_section" class="
fixed
block
overflow-hidden
font-body
z-20
xl:right-0 xl:mr-16 xl:inline-block xl:bottom-auto
w-full">
</nav>
<div id="vector_container" class="fixed left-0 z-0 h-full">
<canvas id="vector_canvas" class="w-full h-full stroke-2"></canvas>
</div>
<section id="first_screen_block" class="h-screen relative overflow-hidden">
<div id="corner_block" class="absolute bottom-0">
<div id="big_name_container"></div>
<div id="click_button_container" class="xl:m-16 xl:ml-12"></div>
</div>
</section>
<section id="second_screen_block" class="h-screen relative xl:mt-64">
<div id="scroll_work_container" class="h-threequarters">
</div>
<div id="work_showcase_text"
class="absolute bottom-0 xl:font-semibold font-display xl:ml-12 xl:text-8xl text-secondary">
<span class="text-primary">Work</span>
showcase.
</div>
</section>
</body>Is there a way to achieve this with CSS and/or JS?
回答1:
Fading Content using Iframes (No JavaScript)
You will need to create an Iframe tag with src attribute set to the content file you would like fade. The main content has to have separate styles. The iframe must be in focus to allow scrolling. More details in the code below.
Demo: https://fadingiframe.netlify.app/
/* Index.html style style-sheet below */
iframe {
position: absolute;
top: 5rem;
width: 100vw;
height: calc(100vh - 6rem);
border: none;
-webkit-mask-image: linear-gradient( /* Mask iframe */
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
mask-image: linear-gradient(
transparent 1rem,
#fff 5%,
#fff 70%,
transparent 90%
);
}
/* mainContent.html style style-sheet below */
body {
position: absolute;
overflow-x: hidden;
margin-top: 2rem;
color: aliceblue;
width: 80vw;
left: 5vw;
}
body::-webkit-scrollbar { /* Remove scroll bar */
display: none;
}
body {
-ms-overflow-style: none; /* keep in mind that it will only scroll if the iframe is in focus */
scrollbar-width: none;
}
p {
padding: 2rem;
font-size: 2rem;
}
<body>
<nav></nav>
<iframe id="main-content-iframe" src="mainContent.html"></iframe>
<!-- Add iframe and src to main content html file -->
<canvas id="canvas1"></canvas>
<footer></footer>
</body>
<!-- Separate html file in root directory -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./mainContent.css" /> <!-- Link to css file -->
</head>
<body>
<section>
<!-- Your Content here-->
</section>
</body>
</html>
-------------------------------------------------------------------------
For Text only -
Body Tag Has Special/Hide Properties
I think your issue is that you do not use the "body" element selector. It has special properties, that by default set the body element height to match the screen. Although it still allows to scroll the inner content. I add and extra background div for the text as well. It provides a better reading experience. Have a look at my solution it may help you solve your problem. If you have any questions don't hesitate to ask.
Demo : https://jsfiddle.net/hexzero/5yjqk43a/
body {
background-image: black;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
background-attachment: fixed;
color: #fff;
}
section {
position: absolute;
padding: 3rem 25%;
background-image: Linear-gradient(
transparent 6rem, <-- Should be the same as nav Height
#fff 30%, <-- Can set this to nav Height for abrupt cut-off
#fff 70%,
transparent 90%
);
-webkit-background-clip: text;
background-clip: text;
background-attachment: fixed;
scroll-behavior: auto;
z-index: 3;
}
nav {
background: rgba(0, 0, 0, 0.616);
width: 100%;
position: fixed;
top: 0;
height: 6rem; <-- Navigation Height
z-index: 4;
}
section > p {
margin-top: 12rem;
color: transparent;
}
.text-background { <-- Remove this style section to have no background for the content,
width: 60%; <-- along side the <div class="text-background"></div> element
height: 100vh;
right: 20%;
position: fixed;
top: 0;
background-image: Linear-gradient(
transparent 6rem, <-- Background to nav height
rgba(102, 51, 153, 0.924) 20%,
rgba(102, 51, 153, 0.931) 90%,
transparent 100%
);
z-index: 0;
}
canvas {
width: 100%;
background-color: rebeccapurple;
position: fixed;
top: 0;
z-index: -1;
}
footer {
position: fixed;
width: 100%;
height: 1rem;
background: rebeccapurple;
z-index: 1;
bottom: 0;
}
p {
font-size: 2rem;
}
Tell me if you would be interested in a JavaScript version, for better browsers support. Thanks
回答2:
By making the color of the nav transparent, you will be able to see through it to the canvas below. Since you did not provide your CSS for your classes; I threw together some new HTML instead. You can see the transparency effect below.
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillText("Hello World! This is text on a canvas that is behind the nav", 10, 10);.nav-wrapper {
height: 60px;
top: 0;
right: 0;
left: 0;
position: fixed;
z-index: 5;
background-color: #00000044;
}
#myCanvas {
z-index:4;
height: 100%;
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin:0">
<div class="nav-wrapper">
<nav>
a simple nav
</nav>
</div>
<div style="position:fixed;top:0;left:0;bottom:0;right:0; background-color: lightblue;z-index: 4 ;">
<canvas id="myCanvas">
</canvas>
</div>
</body>
</html>来源：https://stackoverflow.com/questions/63083256/fade-out-divs-behind-transparent-nav-but-keep-a-background-canvas-visible-behind