Как создать эффект искажения?

Question

[Zombie42679]

Как сделать такой же эффект как здесь - https://www.videinfra.com/ ? Особенно видно на слайде "loftec"

И еще один вопрос, как сделать эффект, чтоб определенный элемент смещался в зависимости от мышки, то есть есть если наводишь на элемент, то он сдвигается от мышки на чуть-чуть в противоположенную сторону

Answer 1

[Николай]

tilt.js

Comments

[Zombie42679]

По-моему не совсем то, что нужно, в примере наоборот крутится не объект а область видимости изменяется, а в том, что вы отправили сам объект вертится

[Николай]

Zombie42679, тогда parallax

[Kovalsky]

Zombie42679, не-а, в вашем примере происходит абсолютно то же самое: изменяется rotate у img.

[Zombie42679]

Никита Полевой, А как его правильно наложить ? Я попробовал у себя, получается при наведении картинка искажается и видно фон белый, а в примере картинка искажается, но всё равно растянута на весь экран

[Kovalsky]

Zombie42679, у вас перед глазами готовая реализация - пример который вы показали, а под рукой у вас DevTools. Нажимаете F12 и смотрите как у них там все устроено.

[Александр Таратин]

Zombie42679, Сделайте изображение в 120% размерностей экрана и отцентрируйте, тогда при повороте края за пределами экрана будут оставаться.

[Zombie42679]

Никита Полевой, Там скорее всего плагин, я даже не могу уловить img там

[Zombie42679]

Александр Таратин, сделал через scale, но он откатывается назад если мышку убрать от изображения

https://jsfiddle.net/ucnrro4a/19/

[Александр Таратин]

Zombie42679, https://jsfiddle.net/ucnrro4a/23/

[Zombie42679]

Александр Таратин, в вашем коде есть проблема, при наведении на контент сбрасывается всё

В целом проблему решил, с помощью stackoverflow, создали контейнер со scale 1.2, внутрь закинули блок на него повесили tilt и готово.

За ответы всем спасибо.

Answer 2

[Павел Федотов]

three.js https://threejs.org/
PIXI.js www.pixijs.com/gallery

Тут можно все написать.

Comments

[Zombie42679]

А можно поподробней ? Не совсем понятно, как из того, что отправили сделать, то что мне нужно

[Павел Федотов]

В  Three.js  можно создать текстуру из нужного изображения и растянуть объект геометрии по всему экрану, а по движению мыши менять координаты по X, Y, Z. А HTML элементы наложить поверх canvas.
Так же можно наложить любые пост-эффекты. Это путь, если нужны доп. эффекты и все по высшему разряду.

Второй путь просто через CSS3 3D Transforms. Так же забиндить мышь на экран и по событию пересчитывать матрицу трансформации. Советую тут взять библиотеку GreenSock.

[Павел Федотов]

Пример на CSS:
https://codepen.io/Lakston/pen/gwPYvA?q=css+3d+mou...