Доброго времени суток, друзья =)
Пожалуй перейду сразу к делу. В общем и целом на сайте содержится слайдер реализованный через bootstrap api. К этому слайдеру я попытался прикрутить эффект увеличения картинки (к сожалению как сделать плавное скольжение я не придумал) как в revolution slider. По факту из-за 10 строк js кода я превратил свой сайт в неповоротливого монстра, которого хотелось бы вылечить при этом оставив эффект плавного увеличения.
Как я это сделал... Просьба не пугаться -)
Итак имеются разные меняющиеся картинки которые помещены в тело слайдера, к каждой картинке прописан базовый scale в 1 единицу. И есть класс out в которому значение scale равняется трем.
.carousel-inner > .out {
transform: scale(3);
transition:all 50s ease-in;
}
По задумке класс out должен появляться сразу после появления новой картинки, после чего начинается медленное увеличение изображения, создавая эффект как на revo. Для того чтобы добавить класс out к картинкам, я при помощи js привязал событие. Выглядит это так:
//инициируем событие через 500мс после появления картинки (сразу нельзя ибо она сразу появляется со scale(3))
$('#home-slider').on('slid.bs.carousel', function () {
setTimeout(function () {
$('#home-slider .active').addClass('out');
}, 500);
})
//удаляем класс
$('#home-slider').on('slide.bs.carousel', function () {
$('#home-slider .active').removeClass('out');
})
В итоге:
Ну в общем работать то все работает, но судя по devtool таймлайну, в момент этого приближения и работы js, скорость рендеринга падает до 30fps. Если есть возможность как-то убрать лаги и оставить эффект или установить более ровнорукий скрипт я буду счастлив =)
Всем огромное спасибо за ответы и потраченное время =)
