时间戳

首页 > 解决方案 > Javascript：网站标题幻灯片淡入效果

javascript - Javascript：网站标题幻灯片淡入效果

问题描述

因为这是一个相当长的问题——提前感谢那些费心阅读它的人！我正在做一个个人博客网站项目，在索引页面中，我想实现一个幻灯片标题（包含背景图片、标题和将用户重定向到实际 psot 的按钮）以动态显示特色博客文章。当标题转换为另一个标题时，我还想要淡入效果。我的标题 html 如下所示：

var slideIndex = 0;

function carousel() {
  var i;
  var x = document.getElementsByClassName("header-slide");
  for (i = 0; i < x.length; i++) {
    x[i].style.opacity = 0;
    x[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > x.length) {
    slideIndex = 1;
  }
  x[slideIndex - 1].style.opacity = 1;
  x[slideIndex - 1].style.display = "block";
  setTimeout(carousel, 3000);
}
.header-1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#1);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
}

.header-2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#2);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
}

.header-3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.29), #000), url(background-image#3);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh;
}

.header-style {
  display: none;
  transition: opacity .5s ease-in;
}
<div class="slideshow-container">
  <div class="header-slide">
    <header class="header-1">
      <nav>
        <div class="row">
          <ul class="main-nav">
            <li><a href="article_directory.html">Articles</a></li>
            <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li>
            <li><a href="photo_gallery.html">Multimedia</a></li>
            <li><a href="current_projects.html">Current Porjects</a></li>
            <li><a href="get_in_touch.php">Get in touch</a></li>
            <li><a href="#first-footer-child">External</a></li>
          </ul>
        </div>
      </nav>
      <div class="hero-text-box">
        <h1>Article#1</h1>
        <a class="btn btn-full" href="#">Read full story</a>
      </div>
    </header>
  </div>

  <div class="header-slide">
    <header class="header-2">
      <nav>
        <div class="row">
          <ul class="main-nav">
            <li><a href="article_directory.html">Articles</a></li>
            <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li>
            <li><a href="photo_gallery.html">Multimedia</a></li>
            <li><a href="current_projects.html">Current Porjects</a></li>
            <li><a href="get_in_touch.php">Get in touch</a></li>
            <li><a href="#first-footer-child">External</a></li>
          </ul>
        </div>
      </nav>
      <div class="hero-text-box">
        <h1>Article#2</h1>
        <a class="btn btn-full" href="#">Read more</a>
      </div>
    </header>
  </div>

  <div class="header-slide">
    <header class="header-3">
      <nav>
        <div class="row">
          <ul class="main-nav">
            <li><a href="article_directory.html">Articles</a></li>
            <li><a href="http://collegiatecycling.org/accc/">Collegiate Racing</a></li>
            <li><a href="photo_gallery.html">Multimedia</a></li>
            <li><a href="current_projects.html">Current Porjects</a></li>
            <li><a href="get_in_touch.php">Get in touch</a></li>
            <li><a href="#first-footer-child">External</a></li>
          </ul>
        </div>
      </nav>
      <div class="hero-text-box">
        <h1>Article#3</h1>
        <a class="btn btn-full" href="#">Read more</a>
      </div>
    </header>
  </div>
</div>

我已经有以下 js 脚本，它虽然嵌入在 html 文件中，但会幻灯片显示标题，但无法实现淡入效果。

我也想要淡入效果，所以我添加了以下 CSS 代码。

通过上述所有措施，我的网站标题仍然无法以淡入效果幻灯片显示。我的问题是，似乎设置转换属性并没有改变任何东西，因为我的 js 脚本改变了标题的不透明度（所以每次它从 0 变为 1 时，CSS 都会处理它的变化方式）？任何帮助表示赞赏！

标签： javascripthtmlcssfrontendslideshow

解决方案

使用 css 关键帧动画：

#header {
  animation: fade 5s ease-out infinite;
}

@keyframes fade {
  0% {
     opacity: .1
  }
  100% {
     opacity: 1
  }
}
<div id="header">
<img src="https://c1.staticflickr.com/5/4016/4543539771_1325623dd6.jpg"></img>
</div>

或者看看浏览器原生动画api：

Web Animations API 向开发人员开放浏览器的动画引擎并通过 JavaScript 进行操作。

该 API 旨在支持 CSS 动画和 CSS 过渡的实现，并为未来的动画效果敞开大门。

它是在受支持的 Web 上进行动画制作的最高效方式之一，让浏览器在没有黑客攻击的情况下进行自己的内部优化

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

https://stackoverflow.com/a/53785137/2494754

推荐阅读