@pirojok_yoyo

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

Как сделать такой эффект у слайдера? Чтобы картинка увеличивалась до момента пока не переключится ан следующий слайд
Пример themes.profteamsolutions.com/identity/?page_id=21
Может есть на примете плагины какие
  • Вопрос задан
  • 745 просмотров
Решения вопроса 2
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Когда слайд становится активным, он получает класс какой-то. Пишем для этого класса обычную css анимацию, тот же transition подойдет.

https://codepen.io/wokster/pen/JyJVym
Ответ написан
Комментировать
Для такого эффекта нужно использовать 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/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
monochromer
@monochromer
DIVeloper
Увеличение можно сделать через css-анимацию. Время анимации перенести в setInterval переключения слайдов.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы