Добрый день!
Интересует, как создать подобный 3d эффект при движении курсора - www.refletcommunication.com/en/experience
Можно ли его реализовать на обычных изображениях? Или только с помощью канваса такое можно достигнуть?
xmoonlight, было бы неплохо )
но мне нужно хотя бы направление, в каком двигаться.
тк вот таких примеров куча - https://codepen.io/eduard-malakhov/pen/mmJwbZ
но это все не то, тк если фон так "крутить" даже с меньшей амплитудой, получается совсем не тот эффект.
Max_Borisov,
Там два слоя: кратер (ближе к смотрящему) и задний фон.
Вам нужно правильно составить перспективу и расстояние между этими слоями в 3D.
Затем - поворачивать через JS при смещении указателя "мыши".
Это называется 3D параллакс или просто псевдо-3D.
xmoonlight, то есть на канвасе и через обычную трансформацию - одинаковые решение?
разве можно сделать эффект, как на слайде с лошадью через обычную трансформацию?
Такого эффекта не добиться с помощью CSS трансформаций. Ибо сколько трансформаций к картинке не применяй, она все равно останется плоской. Очевидно, что там используется webgl. Причем такого эффекта, как на слайде с кратером можно добиться просто применив к картинке карту высот, таким образом она получается выпуклая. И то, вряд ли можно такой техникой добиться идеального результата. С облаками и лошадью, скорее всего, такой трюк уже не прокатит, слишком уж похоже на настоящий 3d объект, но вряд ли таковым является.
Max_Borisov, Псевдо-3D - это не так просто... Это с опытом приходит.
Нужно понимать угол обзора, фокус и искажение перспективы, расстояния между плоскостями, расстояния объектов до камеры и т.д.