文章/答案/技术大牛

发布

社区首页 >问答首页 >在透明导航后淡出div，但在其后面保持背景画布可见。

问在透明导航后淡出div，但在其后面保持背景画布可见。
EN

Stack Overflow用户

提问于 2020-07-25 01:08:40

回答 2查看 688关注 0票数 1

我正试图在我的个人网站上建立：

一个画布元素，屏幕高度和宽度为100%，带有z-index -1。
使用z-索引0的div和节标记中的正常内容。
位于页面中z-索引最高的nav元素。

这种安排允许我有画布作为整个网站的背景，它不滚动，因为它是固定的。导航也是固定的，因此它停留在页面顶部滚动。(“固定”的意思是“位置:固定的”设置在该元素的CSS中)

nav有一个透明的背景，所以它是“透明的”，它显示了它背后的画布内容，如：肚脐和帆布背景 (对不起，我还没有足够的点嵌入图像)

但是，因为导航是透明的和固定的，所以内容会显示在滚动体后面，类似于这样的图像：内容落后于nav。

我想让内容褪色，因为它在导航的底部边缘，但我也想保持导航的透明度，以便在背景中显示画布。理想情况是这样的：文本淡出示例 (取自https://www.youtube.com/watch?v=-vbLeY-eDkQ，但它使用不适用于我的情况的文本剪辑)

编辑:隐藏内容没有褪色也是很好的，目标是使内容不出现在透明的导航，同时显示背景画布。这可能是一个突然的切断，而不是渐变淡出，因为经过更多的研究，我发现，我正在寻找的淡出效果并不是广泛可用或支持的所有元素跨浏览器。

我尝试过从这里检查解决方案：当滚动页面时，隐藏可滚动的内容到透明的固定位置div后面？，但它们使用的是背景图像，这使得它相对简单。在我的例子中，它是一个画布，画布的内容随时间而变化。

下面是我当前的网页结构(注意: CSS类来自TailwindCSS，但是命名是不言自明的。我也在用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>

是否有办法通过CSS和/或JS实现这一目标？

javascript

html

jquery

css

canvas

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-07-25 13:40:13

使用Iframes的衰落内容(无JavaScript)

您需要创建一个Iframe标记，并将src属性设置为您希望淡出的内容文件。主要内容必须有不同的样式。iframe必须在焦点允许滚动。下面代码中的更多细节。

演示：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>

只适用于文字-

Body标记具有特殊/隐藏属性

我认为您的问题是没有使用"body“元素选择器。它具有特殊的属性，默认情况下将主体元素的高度设置为与屏幕匹配。尽管它仍然允许滚动内部内容。我也为文本添加和额外的背景div。它提供了更好的阅读体验。看看我的解决方案，它可能会帮助你解决问题。如果你有任何问题，请毫不犹豫地问。

演示：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;
}

告诉我您是否对JavaScript版本感兴趣，以获得更好的浏览器支持。谢谢

票数 2

Stack Overflow用户

发布于 2020-07-25 01:44:07

通过使导航的颜色透明，你将能够通过它看到下面的画布。因为你没有为你的类提供CSS，所以我把一些新的HTML放在一起。你可以看到下面的透明度效应。

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63083256

复制

相似问题

问在透明导航后淡出div，但在其后面保持背景画布可见。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在透明导航后淡出div，但在其后面保持背景画布可见。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在透明导航后淡出div，但在其后面保持背景画布可见。
EN