Посмотрите, как я воссоздаю новый дурацкий раздел героя Elementor в Etch с помощью GSAP.

Описание: Посмотрите этот проект в действии: https://codepen.io/welbinator/pen/Ggq...

🔗 Упомянутые ссылки и ресурсы:
Get Etch: https://etchwp.com?aff=43a07932 (партнерская ссылка)
Automatic CSS (ACSS): https://automaticcss.com/ref/2441/ (партнерская ссылка)

Хотите узнать, как использовать ИИ для развития вашего агентства?

https://community.modernbuilderssocie... (партнерская ссылка)

Ищете услуги веб-разработки или брендинга? https://apexbranding.design

🔴 Подписывайтесь, чтобы получать больше обзоров и примеров реальных веб-разработок!

В этом видео я воссоздаю главный раздел с недавно обновленной главной страницы Elementor в качестве забавного упражнения по «ненависти к программированию», вдохновленного его эффектными анимациями GSAP и поведением, связанным с перехватом прокрутки.

В оригинале используется фоновое видео (я использовал статическое изображение), которое уменьшается при прокрутке до конечного размера, после чего возобновляется обычная прокрутка страницы; текст и призыв к действию исчезают/затухают во время уменьшения, с некоторыми незначительными переходами фонового изображения, которые я не стал воспроизводить.

Я показываю результат в реальном времени на своем сайте WordPress, созданном с помощью Etch: прокрутка плавно уменьшает главный раздел (работает вверх и вниз), текст/призыв к действию исчезают, как в оригинале, и он корректно отображается на мобильных устройствах при загрузке страницы (элементы центрируются правильно, хотя изменение размера окна в середине просмотра может вызывать сбои из-за JavaScript — это нормально для таких библиотек; обновление страницы исправляет это).

Процесс начался в Replit с использованием ИИ (вероятно, Клода или подобного): я использовал около 11 итеративных подсказок, чтобы сначала создать код в React/Tailwind (уменьшение размера больших изображений, центрирование и т. д.), а затем попросил ИИ преобразовать его в чистый HTML/CSS/JS — он одним нажатием создал чистую версию в новом чате.

Код основан на ядре GSAP + ScrollTrigger (через теги CDN-скриптов, которые я добавил непосредственно в HTML-элемент Etch — для этой демонстрации не требуется добавление в очередь). Я вставил HTML-структуру на страницу Etch, выгрузил CSS в новый лист Style Manager ("Elementor"), вставил CDN-ссылки GSAP/ScrollTrigger в качестве HTML-тегов скриптов внутри div-элемента hero, удалил строки импорта Replit, и всё заработало на фронтенде (но не в предварительном просмотре конструктора).


Я отмечаю, что таким образом легко интегрировать библиотеки JavaScript, такие как GSAP, в Etch (через CDN или enqueue), сравниваю это с более простыми библиотеками, такими как AOS, для базовых эффектов плавного появления, и подчеркиваю, что пользовательские блоки больше не нужны для большинства сайтов — Etch прекрасно с этим справляется.

В конце видео подводится итог трехэтапному процессу (создание с помощью ИИ → конверсия без плагинов → вставка в Etch) и демонстрируется, насколько легко реализовать сложные анимации прокрутки без плагинов.