Как сделать такой же эффект как здесь? Особенно видно на слайде "loftec"?
Попробовал сделать подобное, но у меня при наклоне картинки видно белый фон, а у них ощущение, что картинка огромная и по ней курсор ходит.
$('.test').tilt({
maxTilt: 2,
perspective: 500,
});
.test {
height: 100vh;
width: 100%;
background: url(https://i.ytimg.com/vi/oZa_djYJr4E/maxresdefault.jpg);
}
Ответ
Создаем контейнер для трансформируемого блока
Ставим этому контейнеру transform: scale(...), потому как плагин tilt трансформирует сам этот объект переназначая инлайново значения transform
Самому блоку (если это бэкграунд) ставим background-size: cover
Находим нужного качества и размера картинку, которая всё это будет терпеть
Чтобы эффект параллакса в Tilt не слетал, добавляем параметр reset: false
$('.test').tilt({
maxTilt: 2,
perspective: 500,
reset: false //Не возвращает параллакс на исходное "нулевое" значение
});
.test-container {
transform: scale(1.35);
}
.test {
height: 100vh;
max-width: 100%;
background: url(https://i.ytimg.com/vi/oZa_djYJr4E/maxresdefault.jpg);
background-size: cover
}
Комментариев нет:
Отправить комментарий