Javascript: эффект постепенного появления заголовка веб-сайта - PullRequest
Новая
       14

Javascript: эффект постепенного появления заголовка веб-сайта

0 голосов
/ 12 июня 2018

Поскольку это один довольно длинный вопрос, заранее спасибо тем, кто потрудился его прочитать!Я делаю личный проект веб-сайта блога, и на главной странице я хочу получить заголовок слайд-шоу (содержит фоновое изображение, заголовок и кнопку, перенаправляющую пользователя на реальный 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-коды.

При всех вышеперечисленных мерах заголовок моего веб-сайта все еще не может показывать слайды с помощью fade-в результате.Мой вопрос, кажется, установка свойства transition ничего не меняет, так как непрозрачность заголовка изменяется моим сценарием js (поэтому каждый раз, когда он изменяется с 0 на 1, CSS будет обрабатывать, как он меняется)?Любая помощь приветствуется!

1 Ответ

0 голосов
/ 12 июня 2018

Использование анимации ключевых кадров 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 анимации браузера:

API веб-анимации открывает движок анимации браузера для разработчиков иманипулирование с помощью JavaScript.

Этот API был разработан для того, чтобы лежать в основе реализации CSS-анимаций и CSS-переходов, и оставляет дверь открытой для будущих анимационных эффектов.

Это один из наиболее эффективных способов анимации в Интернете, где он поддерживается, позволяя браузеру выполнять собственные внутренние оптимизации без хаков

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

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

...