Как сделать плавно меняющийся background в шапке по таймеру?

Question

[artem7299]

Всем привет.
Задача такая: сделать плавно меняющийся фон в шапке по таймеру, чтобы первый фон исчезал и на его месте появлялся второй и т.д.

<header class="header" style="background-image: url(img/bg_header_img_1.jpg)">

.header
  min-height: 750px
  height: 100vh
  background-size: cover
  background-position: bottom
  background-repeat: no-repeat
  position: relative
  z-index: 0
  &::before
    position: absolute
    content: ''
    top: 0
    left: 0
    height: 100%
    width: 100%
    background-color: rgba(17,17,17,.5)

Весь инет облазил, ничего путного не нашел, прошу помощи здесь)

Comments

[artem7299]

Вот как выглядит сайт

Answer 1

[Stalker_RED]

Две картинки в фоне, одной из них меняем прозрачность.

Answer 2

[Андрей]

там скрипта то на 1 минуту написать
jsfiddle.net/svistiboshka/xpvt214o/926813

Comments

[artem7299]

Я видимо чего-то не понимаю. Уже во все места попробовал засунуть, и так, и сяк, не выходит. Если не сложно, можете готовый код написать, чтобы его можно было просто вставить?

<header class="header" style="background-image: url(img/bg_header_img_1.jpg);">
		<div class="header-pannel">
			<div class="container">
				<div class="row">
					<div class="col-md-2">
						<div class="header-logo">
							<a href="#"><span>Liveangle.ru</span></a>
						</div>
					</div>
					<div class="col-md-7">
						<nav class="header-mnu">
							<ul class="sf-menu">
								<li><a href="#">Главная</a></li>
								<li>
									<a href="#">Все категории <i class="fa fa-angle-right"></i></a>
									<ul>
										<li>
											<a href="#">Животные <i class="fa fa-angle-right"></i></a>
											<ul>
												<li>
													<a href="#">Типы животных <i class="fa fa-angle-right"></i></a>
													<ul>
														<li><a href="#">Простейшие</a></li>
														<li><a href="#">Губки</a></li>
														<li><a href="#">Кишечнополостные</a></li>
														<li><a href="#">Черви</a></li>
														<li><a href="#">Моллюски</a></li>
														<li><a href="#">Членистоногие</a></li>
														<li><a href="#">Хордовые</a></li>
													</ul>
												</li>
												<li>
													<a href="#">Классы животных <i class="fa fa-angle-right"></i></a>
													<ul>
														<li><a href="#">Ракообразные</a></li>
														<li><a href="#">Паукообразные</a></li>
														<li><a href="#">Насекомые</a></li>
														<li><a href="#">Млекопитающие</a></li>
														<li><a href="#">Птицы</a></li>
														<li><a href="#">Пресмыкающиеся</a></li>
														<li><a href="#">Земноводные</a></li>
														<li><a href="#">Рыбы</a></li>
													</ul>
												</li>
												<li>
													<a href="#">Отряды животных <i class="fa fa-angle-right"></i></a>
													<ul>
														<li><a href="#">Насекомоядные</a></li>
														<li><a href="#">Рукокрылые</a></li>
														<li><a href="#">Грызуны</a></li>
														<li><a href="#">Хищные</a></li>
														<li><a href="#">Китообразные</a></li>
														<li><a href="#">Парнокопытные</a></li>
														<li><a href="#">Хоботные</a></li>
														<li><a href="#">Приматы</a></li>
													</ul>
												</li>
												<li>
													<a href="#">Семейства животных <i class="fa fa-angle-right"></i></a>
													<ul>
														<li><a href="#">Заячьи</a></li>
														<li><a href="#">Беличьи</a></li>
														<li><a href="#">Мышиные</a></li>
														<li><a href="#">Кошачьи</a></li>
														<li><a href="#">Псовые</a></li>
														<li><a href="#">Медвежьи</a></li>
														<li><a href="#">Куньи</a></li>
														<li><a href="#">Оленевые</a></li>
													</ul>
												</li>
											</ul>
										</li>
										<li>
											<a href="#">Растения <i class="fa fa-angle-right"></i></a>
											<ul>
												<li><a href="#">Деревья</a></li>
												<li><a href="#">Цветы</a></li>
												<li><a href="#">Дикая растительность</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li><a href="#">Фотогалерея</a></li>
								<li><a href="#">О нас</a></li>
							</ul>
						</nav>
					</div>
					<div class="col-md-3">
						<div class="header-socials">
							<span>Поделитесь нашей ссылкой:</span>
							<a href="#"><i class="fa fa-vk"></i></a>
							<a href="#"><i class="fa fa-twitter"></i></a>
							<a href="#"><i class="fa fa-facebook"></i></a>
							<a href="#"><i class="fa fa-odnoklassniki"></i></a>
							<a href="#"><i class="fa fa-rss"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="header-content">
			<div class="container">
				<div class="row">
					<div class="col">
						<div class="header-title">
							<h1>Онлайн энциклопедия<br>о мире <b>животных</b> и <b>растений</b></h1>
						</div>
						<div class="header-search">
							<p>Воспользуйтесь поиском, чтобы найти много интересного!</p>
							<input type="search" class="search-line" name="search" placeholder="Например: белый медведь">
							<button class="search-button"><i class="fa fa-search"></i></button>
						</div>
						<div class="header-scrolldown">
							<a href="#categories"><i class="fa fa-angle-double-down"></i></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</header>

.header
  min-height: 750px
  height: 100vh
  background-size: cover
  background-position: bottom
  background-repeat: no-repeat
  position: relative
  z-index: 0
  &::before
    position: absolute
    content: ''
    top: 0
    left: 0
    height: 100%
    width: 100%
    background-color: rgba(17,17,17,.5)

.header-pannel
  position: relative
  background-color: #fff
  min-height: 90px
  box-shadow: 0 5px 0 rgba(255,255,255,.3)
  color: $dark-text
  font-family: $default-font
  .header-logo
    text-transform: uppercase
    font-size: em(16px)
    font-weight: 700
    line-height: 90px
    a
      color: #707070
      text-decoration: none
  .header-mnu
    .sf-menu
      float: none
      margin: 0
      padding: 0
      a
        transition: all .25s ease
        border: none
        height: 90px
        line-height: 35px
      >li
        transition: all .25s ease
        background-color: #fff
        >a
          color: $dark-text
          border: none
          padding: 25px 30px 25px
          .fa
            font-size: 14px
            margin-left: 2px
        &:hover
          background-color: $main-color
          >a
            color: #fff
        ul
          margin-top: 0
          li
            background-color: #fff
            margin: 0
            padding: 0
            border:
              bottom: 1px solid #dbdbdb
              right: 1px solid #dbdbdb
              left: 1px solid #dbdbdb
            &:hover
              >a
                color: lighten($dark-text, 10%)
            a
              height: 50px
              padding: 6px 20px 0 20px
              color: $dark-text
              .fa
                font-size: 14px
                margin-left: 2px
              &:hover
                background-color: #dbdbdb
                color: darken($dark-text, 20%)
  .header-socials
    text-align: center
    margin-top: 12px
    span
      display: block
      font-size: 14px
      color: $dark-text
    a
      color: $dark-text
      display: inline-block
      width: 36px
      height: 36px
      line-height: 36px
      text-align: center
      border: 1px solid $dark-text
      border-radius: 50%
      margin-right: 1px
      transition: all .25s ease
      margin: 1px 0
      &:hover
        color: #41abe1
        border: 1px solid #41abe1
.header-content
  padding: 100px 0 0 0
  text-align: center
  color: $light-text
  .header-title
    font-size: 26px
  .header-search
    margin-top: 40px
    p
      opacity: .65
      margin-bottom: 10px
    .search-line
      width: 58%
      height: 40px
      padding-left: 15px
      font-size: 16px
      color: #373737
      border: none
      outline: none
      position: relative
    .search-button
      position: absolute
      text-align: center
      background-color: $main-color
      border: none
      outline: none
      cursor: pointer
      height: 40px
      width: 40px
      .fa
        color: $light-text
        opacity: .7
      &:hover
        background-color: lighten($main-color, 5%)
        .fa
          opacity: 1

  .header-scrolldown
    margin-top: 240px
    a
      color: $dark-text
      display: inline-block
      width: 50px
      height: 50px
      line-height: 60px
      border: 1px solid $light-text
      border-radius: 50%
      margin-right: 1px
      transition: all .25s ease
      margin: 1px 0
      opacity: .35
      .fa
        font-size: 25px
        color: $light-text
      &:hover
        opacity: 1

[Андрей]

artem7299, выложите куда нибудь код. а то эти куски не полноценны в sass переменные. переведите в css

Answer 3

[grinch_asd]

https://wowjs.uk/ - используй функцию data-wow-delay

Comments

[artem7299]

С ним ездит вся шапка вместе с контентом. Да и к тому же нет нужной анимации.
Хотелось бы плавно переливающийся фон каждые N секунд из одного изображения в другое