You need to know which plug-in is used in the header on https://omoloko.icecream-chl.ru/ . Where the background-image is approaching and moving away.

  • one
    There on css it is made, without jquery. - Arnial

1 answer 1

This is not a plugin. This is a regular CSS animation.

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

Useful resources on this topic

  • Thank you, cool animation. - sergey - dev
  • 2
    @ SergeySamohvalov, please. Well yes, albeit simple. But I wanted ice cream) - Alexander Bragin