9

Как сделать такой же эффект как здесь? Особенно видно на слайде "loftec"?

Попробовал сделать подобное, но у меня при наклоне картинки видно белый фон, а у них ощущение, что картинка огромная и по ней курсор ходит.

$('.test').tilt({
  maxTilt: 2,
  perspective: 500,
});
.test {
  height: 100vh;
  width: 100%;
  background: url(https://i.ytimg.com/vi/oZa_djYJr4E/maxresdefault.jpg);
}
<div class="test"></div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>

2
  • Если коротко, то картинку нужно сделать больше, чем 100% ширины. Например, задав ширину 200% или использовать transfrom scale (например, 1.5). Тогда не будет "засветов по сторонам".
    – NeedH8
    Commented 24 нояб. 2017 в 6:17
  • Я пробовал scale, действительно засветов нет, но как только убираешь курсор с картинки scale слетает на 1 и остается. Commented 24 нояб. 2017 в 6:18

2 ответа 2

7
  1. Создаем контейнер для трансформируемого блока
  2. Ставим этому контейнеру transform: scale(...), потому как плагин tilt трансформирует сам этот объект переназначая инлайново значения transform
  3. Самому блоку (если это бэкграунд) ставим background-size: cover
  4. Находим нужного качества и размера картинку, которая всё это будет терпеть
  5. Чтобы эффект параллакса в 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
}
<div class="test-container">
	<div class="test"></div>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>

2

в оригинале они "балуются" трансформацией, которая меняется исходя из положения курсора.

transform: rotateX(6.77007deg) rotateY(-1.5225deg) translateZ(-15vw) scale(1.4);

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.