www.state-it.info

Gran base de respuestas a las preguntas de los desarrolladores
Header decor

Como hacer suavemente cambio de fondo en la cabecera de temporizador?

artem7299 2018-11-07 00:35:12

hola a Todos.
La tarea es: hacer suavemente cambio de fondo en la cabecera de un temporizador, para que el primer fondo desaparecido y en su lugar aparecía la segunda, etc.

<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)


Todo el inet облазил, nada sensato no encontrado, pido ayuda aquí)

Total answers: 5

grinch_asd 2018-11-07 01:05:50

https://wowjs.uk/ - utiliza la función data-wow-delay

artem7299 2018-11-07 01:51:03

Con él va todo el gorro, junto con el contenido. Sí y, además, no es el propietario de la animación.
Quisiera suavemente переливающийся el fondo de cada N segundos de una imagen a otra


artem7299 2018-11-07 01:57:36

así es como se ve el sitio
5be21c5ac2242878986320.jpeg

Get-Web 2018-11-07 01:58:58

Hay una decisión de la cp / rp gnatkovsky.com.ua/slajder-fonovogo-izobrazheniya-i...

artem7299 2018-11-07 02:12:11

Esto yo ya lo he probado. No sirvió de nada, por desgracia


Get-Web 2018-11-07 02:52:02

artem7299, Significa mal hecho... Proporcione el código de lo que has hecho, entonces te pueden ayudar, y escribir de todo, no todos tienen el tiempo


Stalker_RED 2018-11-07 02:21:32

Dos imágenes en el fondo, uno de ellos, cambiando la transparencia.

svistiboshka 2018-11-07 02:47:23

allí script en 1 minuto escribir
jsfiddle.net/svistiboshka/xpvt214o/926813

artem7299 2018-11-07 11:26:55

Me parece algo que no entiendo. Ya en todos los lugares intentado meter, y así, de comprar, no sale. Si no es difícil, puedes listo el código de escribir, a fin de que pueda simplemente вставить?

<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


svistiboshka 2018-11-07 12:12:40

artem7299, poner en cualquier otro lugar del código. y estos pedazos no полноценны en sass variables. ponga en el css


Preguntas relacionadas:

Footer decor

© www.state-it.info | Base of answers to questions for developers and programmers.