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

#javascript #html #jquery #css #parallax

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

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



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








    

Ответы

Ответ 1

Создаем контейнер для трансформируемого блока
Ставим этому контейнеру 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
}

	









Ответ 2

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

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