Перейти к содержимому

ПЕРЕТАСКИВАНИЕ ДЛЯ ВРАЩЕНИЯ — Интерактивное 3D в Elementor

Nicolai Palmkvist

0:00 / 0:00

ПЕРЕТАСКИВАНИЕ ДЛЯ ВРАЩЕНИЯ — Интерактивное 3D в Elementor

6 334 просмотра · 3 недели назад
Nicolai Palmkvist
78,1 тыс. подписчиков
6 334 просмотра · 3 недели назад
✅ Получите изображения и код: https://nicolaipalmkvist.com/eye-code/ Что если бы посетители могли сами заглянуть на ваш сайт и вращать объект? В этом уроке по Elementor я покажу вам, как создать интерактивный 3D-объект, который вращается сам по себе и реагирует на перетаскивание. В качестве примера в этом проекте я использую Землю, но идея гораздо шире, чем просто планета: вы можете изменить визуальное оформление, чтобы создать опыт, подходящий именно для вашего сайта. Проект объединяет конструктор страниц Elementor и Three.js. Elementor отвечает за дизайн страницы, включая полноэкранный раздел, многослойные изображения, заголовки и кнопки. Three.js оживляет объект и позволяет посетителям исследовать его, перетаскивая. Вместе они превращают статичный главный раздел в нечто, с чем люди могут взаимодействовать. В видео мы рассмотрим, как этот эффект вписывается в полноценную страницу WordPress. Фон и передний план создают глубину вокруг объекта, а текст и другой контент делают раздел полезным для веб-сайта. Я покажу вам готовый результат, объясню основную идею взаимодействия и продемонстрирую, как можно изменить визуальный элемент без полной переработки страницы. Я также расскажу о важном аспекте создания собственных визуальных элементов: изображение, используемое для 3D-объекта, должно быть подготовлено в правильном формате. В примере с Землей это означает, что нужно начать с плоского изображения, которое может обтекать фигуру. Я покажу, как выглядит это исходное изображение и как я создал визуальные элементы, использованные в проекте. Это открывает возможности для экспериментов с различными цветами, текстурами и объектами. Если вам нравится креативный веб-дизайн, этот урок по Elementor — отличный способ изучить, как интерактивные элементы могут стать частью страницы, а не выглядеть как отдельная демонстрация. Вы можете использовать ту же концепцию для веб-сайта на космическую тематику, презентации продукта или другой идеи, где посетители должны иметь возможность рассмотреть что-то с разных ракурсов. Изображения, код и другие ресурсы, использованные в видео, приведены ниже, поэтому вы можете попробовать этот эффект в своем собственном проекте Elementor. А если вам нужен готовый дизайн, вы можете получить готовый шаблон и импортировать его на свой сайт WordPress. После этого вы сможете заменить визуальные элементы и настроить дизайн под себя. Другие ссылки: ✅ Получите Elementor Pro: https://be.elementor.com/visit/?bta=2... ✅ Программа для записи экрана: https://lifeonablock.com/screencast