Как называется такой эффект и как его реализовать?

#javascript #html #css

Пример
Бэкграунд слайдера, когда картинка плавно увеличивается в размерах сама по себе.



.container3 {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(100%, rgba(0,
0, 0, .5)), color-stop(50%, transparent)), url(../img/main-screen.jpg);
  background: linear-gradient(180deg, rgba(0, 0, 0, .5) 100%, transparent 50%), url(../img/main-screen.jpg);
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-attachment: fixed;
  animation-duration: 20s; /*Время анимации*/
  animation-name: bgsize;
  animation-timing-function: linear;
  overflow: hidden;
}

@keyframes bgsize {
  to {background-size: 300% auto;}
}



    

Ответы

Ответ 1

Такая анимация, даже в VK (соц.сеть), сделана на CSS с использованием @keyframes
анимации.

Вот пример реализации.



body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url('https://images.pexels.com/photos/8633/nature-tree-green-pine.jpg')
no-repeat center center / 100% auto;
  animation-duration: 20s; /*Время анимации*/
  animation-name: bgsize;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes bgsize {
  to {background-size: 300% auto;}
}






Конкретно для img



.img-sizing {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

.img-sizing img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation-duration: 20s; /*Время анимации*/
  animation-name: imgsize;
  animation-timing-function: linear;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  animation-fill-mode: forwards;
}

@keyframes imgsize {
  to {
    width: 300%;
    height: 300%;
    left: -150%;
    top: -150%;
  }
}

  



Ответ 2

Я не знаю точно как называется этот эффект, но такого эффекта можно достичь с помощью
js или css анимации.

В вашем случае я бы выбрал css-анимацию и сделал бы так



img {
  animation-duration: 10s;
  animation-name: move;
  animation-iteration-count: infinite;

}
@keyframes move {
    from { transform: scale(1); }
    to   { transform: scale(1.2); }
}