Как называется плагин на jquery

307
09 августа 2017, 22:08

Нужно узнать какой плагин используется в хедере на сайте https://omoloko.icecream-chl.ru/.Там где background-image приближается и отдаляется.

Answer 1

Это не плагин. Это обычная CSS анимация.

.header { 
  background: center no-repeat; 
  background-size: cover; 
  height: 170px; 
  width: 100%; 
  box-sizing: border-box; 
  padding: 20px 35px; 
  overflow: hidden; 
} 
 
.header { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  z-index: 1000; 
  transition: height .35s; 
} 
 
.header.original { 
  visibility: visible !important; 
} 
 
.header__background { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  top: 0; 
  left: 0; 
  -webkit-animation: zoom-background 15s infinite alternate linear; 
  animation: zoom-background 15s infinite alternate linear; 
} 
 
@-webkit-keyframes zoom-background { 
  0% { 
    -webkit-transform: scale(1); 
    transform: scale(1) 
  } 
  100% { 
    -webkit-transform: scale(1.5); 
    transform: scale(1.5) 
  } 
} 
 
@keyframes zoom-background { 
  0% { 
    -webkit-transform: scale(1); 
    transform: scale(1) 
  } 
  100% { 
    -webkit-transform: scale(1.5); 
    transform: scale(1.5) 
  } 
}
<header class="header original" style="visibility: visible;"> 
  <div class="header__background" style="background-image: url(https://omoloko.icecream-chl.ru/images/omoloko/header_bg/6.jpg);"></div> 
</header>

Полезные ресурсы на эту тему

  • CSS3-анимация
  • Использование CSS-анимации
READ ALSO
webpack-stream, ошибки компиляции

webpack-stream, ошибки компиляции

Используется webpack-stream, задача вынесена в отдельный модуль

289
Не работает обработчик закрытия lightbox

Не работает обработчик закрытия lightbox

Это Lightbox, рядом с большим изображением есть кнопка, при клике на которую Lightbox скрывается, но почему-то не работает обработчик на кнопку

280
Событие &ldquo;Resize()&rdquo; срабатывает на телефоне даже если просто прокручивать страницу

Событие “Resize()” срабатывает на телефоне даже если просто прокручивать страницу

ЗдравствуйтеНа сайте есть галерея, которая берет нужное количество картинок в зависимости от размера экрана

303