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

Создание лендинга с GSAP-анимацией с помощью ИИ (полный процесс)

andrea egli

0:00 / 0:00

Создание лендинга с GSAP-анимацией с помощью ИИ (полный процесс)

3 290 просмотров · 3 мес. назад
andrea egli
24,7 тыс. подписчиков
3 290 просмотров · 3 мес. назад
Поэтому на этот раз я позволил ИИ создать настоящий сайт на WordPress и Elementor. Не демо-версию — а реальную рабочую целевую страницу от начала до конца. Я начал дизайн в Claude Design, просто чтобы добиться нужного внешнего вида, ведь я всё-таки дизайнер. Затем я передал его в Claude Desktop, а Novamira Pro выполнила основную работу по WordPress и Elementor — создав всё в Elementor V4, включая анимации GSAP. Никакого жёсткого кодирования, всё нативно и редактируемо (за исключением анимаций GSAP), что меня, честно говоря, удивило. Есть прелоадер GSAP, анимации прокрутки, цифры обратного отсчёта и оранжевая подсветка, которая скользит между заголовками при прокрутке. Навигация и нижний колонтитул (нижний колонтитул ещё нуждается в небольшой доработке, так как я переместил только последний контейнер, но это несложно) были правильно реализованы в Theme Builder, и всё работает на мобильных устройствах (более или менее, возможно, потребуются дополнительные корректировки). После завершения я перенёс весь сайт на Cloudways. Если вы ещё не пользовались, это управляемый облачный хостинг, занимающий промежуточное положение между недорогим общим хостингом и собственным сервером. Миграция, тестовая среда, резервное копирование, SSL-сертификаты и поддержка — всё это включено, а также есть функция SafeUpdates, которая сначала проверяет обновления плагинов на тестовой копии, чтобы ничто не сломало ваш рабочий сайт. Для сайта с таким количеством анимации увеличение скорости того стоит. 🔥 Пример реального сайта, который я создал и на основе которого разработал эту демо-версию: https://contract.debrieft.app/ 🔥 Демо-версия: https://wordpress-1653036-6574728.clo... 🔥 Скачать комплект, включая спецификацию, можно здесь: https://drive.google.com/drive/projec... 0:00 Вступление - Новый рабочий процесс Claude Design / Claude Desktop / Novamira Pro 00:57 Что мы создаём 01:44 Обзор Claude Design 06:02 Обзор Claude Desktop 09:45 Внутри редактора Elementor после сборки 11:54 Перенос целевой страницы в Cloudways 18:51 Тест скорости с Rank Math 19:12 Показано, где Код для прелоадера: 19:43 Как подключить Novamira MCP к Claude Desktop 21:23 Проверка соединения...конец _________________________________________________________________________________________________ 🟠 Получите управляемый хостинг Cloudways: 3-дневная бесплатная пробная версия (без кредитной карты, без списаний средств) Бесплатный Object Cache Pro и SSL-сертификат Круглосуточная экспертная поддержка 24/7/365 Неограниченное количество сайтов https://www.cloudways.com/en/?id=1737379 _________________________________________________________________________________________________ 🔥 Я создал ОС для веб-дизайнеров: ПРИСОЕДИНЯЙТЕСЬ к debrieft.app здесь: → https://debrieft.app 🟠 ВЫ ТАКЖЕ МОЖЕТЕ НАЙТИ МЕНЯ ЗДЕСЬ LINKEDIN -   / egliandrea   INSTAGRAM -   / studio.egli   🟠 ПО ВОПРОСАМ СОТРУДНИЧЕСТВА contact@studioegli.com Оговорка: Некоторые ссылки в описании моих видео могут быть партнерскими ссылками, это означает, что я буду получать комиссию с покупок, совершенных вами по моей ссылке. Использование моих ссылок/кодов не влечет для вас никаких дополнительных затрат, это просто еще один способ поддержать меня и мой канал! :) #Cloudways #webhosting #gutenberg #wordpress #novamiraai #claudecode #Claude #AI #elementorpro #WebDesign #Novamira