Как сделать такой эффект у слайдера?

Question

[pirojok_yoyo]

Как сделать такой эффект у слайдера? Чтобы картинка увеличивалась до момента пока не переключится ан следующий слайд
Пример themes.profteamsolutions.com/identity/?page_id=21
Может есть на примете плагины какие

Answer 1

[Максим Тимофеев]

Когда слайд становится активным, он получает класс какой-то. Пишем для этого класса обычную css анимацию, тот же transition подойдет.

https://codepen.io/wokster/pen/JyJVym

Answer 2

[Михаил Талалаев]

Для такого эффекта нужно использовать css свойство `transform: scale(1);`
описать процесс анимации в css файле, примерно так

@keyframes scale {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(2);
    }
}

теперь задать время выполнения анимации, эффекты и т.д.

.myScale {
  animation: scale 3s linear;
  animation-fill-mode: forwards;
}

И в конце остается написать код который будет ставить и удалять класс `.myScale` на элемент который нужно увеличивать. Для этих целей можете посмотреть плагин https://github.com/Talalaev/Jazzy. Он помогает устанавливать и убирать класс анимации, легко делать задержки, обрывать анимацию и т.д.
так же генерирует события в js в процессе выполнения анимации. можно использовать с любой готовой анимацией например с https://daneden.github.io/animate.css/

Answer 3

[monochromer]

Увеличение можно сделать через css-анимацию. Время анимации перенести в setInterval переключения слайдов.

Comments

[pirojok_yoyo]

а как правильно задать анимацию в setinterval?
var timerId = setInterval(function() {

}, 2000);