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

386

25 ноября 2017, 11:52

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

Answer 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 
}

<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>

Answer 2

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

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

Создание интернет-магазина спортивных товаров в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Разбор js скрипта

Есть скрип(ниже) в который я привел читабельному виду и закоментировл eval( вместо него поместил documentwrite)

264

javascript

Сделать перелистывание картинок

Как сделать альбом на странице но чтобы отображалось не больше 3 фотографий остальные были б скрытие и перелистивались сами через некоторое...

217

javascript

Как получить el как dom элемент (Vue js?)

Можно ли обратиться к элементу напрямую (типо thisel), а не городить, как в примере ниже?

257

javascript

Как очистить теги в materialize css?

Не могу реализовать массовое очистка тегов, точнее при нажатие на кнопку чтобы все теги в materialize css chips удалять массово, так не нашел пути

257