Если вы когда-нибудь задумывались, как сделать 3D-анимацию, видимую при движении мыши, оставайтесь с нами до конца этого текста и узнайте.
Начнем создавать анимацию с добавления виджета изображения. Мы добавим три изображения с горами, чтобы создать 3D-эффект.
1.Добавление первого изображения
Первое, что вам нужно сделать, это выбрать первое изображение, которое является первым слоем гор, в Elementor установить ширину изображения 100%, затем в Advanced, в разделе Custom Positioning, установить изображение в абсолютное положение. Следующее, что вам нужно сделать, это установить горизонтальное и вертикальное смещение на VW, это поможет нам подогнать наш дизайн под ширину экрана. Следующее, что вам нужно сделать, это установить вертикальную ориентацию на 25vw и горизонтальную ориентацию на 2vw.
2.Добавление еще одного изображения
Затем вы дублируете изображение и помещаете его на другой слой, в дополнительных настройках в разделе «Пользовательское позиционирование» меняете значения смещения, удаляете горизонтальное значение и оставляете вертикальное значение без изменений.
3.Добавление третьего изображения
Повторите тот же шаг, продублируйте изображение, выберите третий слой и в разделе «Расширенная обрезка» в разделе «Пользовательское позиционирование» установите ширину на «Пользовательская», затем единицы измерения на «VW» и «Пользовательская ширина» на «120 vw». Следующее, что вам нужно сделать, это установить смещение на -15vw в горизонтальной ориентации и установить смещение на 10vw в вертикальной ориентации.
Теперь добавьте анимацию, включив эффекты мыши в эффектах движения, нажмите «Отслеживание мыши» и оставьте настройки по умолчанию. Измените наклон 3D на противоположную сторону и установите скорость на 1.
Проверьте, работает ли анимация, наведя курсор на экран.
Чтобы было проще управлять всеми слоями, откройте навигатор, щелкнув правой кнопкой мыши и выбрав «Навигатор», а затем выберите другое изображение. В разделе «Эффекты движения» включите «Эффекты мыши», затем нажмите «Отслеживание мыши» и измените направление движения на «прямо», а скорость — на 0,5 и установите скорость 3D-наклона на 2.
И последнее изображение, в эффектах движения включите эффекты мыши, затем в отслеживании мыши измените направление движения на прямое, а скорость оставьте как есть. В 3D Tilt установите скорость на 1.
Помните, этот эффект наведения не работает на телефонах и планшетах, поскольку они не используют мышь.
Проверьте, удалось ли вам это сделать, перемещая мышь по экрану.
Если вам понравился этот короткий урок по созданию анимации, посетите наш блог для более интересных идей.
Текст и изображения взяты из источников: ютуб
