Страницы

Поиск по вопросам

понедельник, 8 октября 2018 г.

Эффект искажения, параллакс?

Как сделать такой же эффект как здесь? Особенно видно на слайде "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 }


Комментариев нет:

Отправить комментарий