Этот сайт создает ощущение путешествия в космосе (эффект параллакса). скачать в хорошем качестве

Этот сайт создает ощущение путешествия в космосе (эффект параллакса).

День 4 из 10 дней • 10 веб-сайтов с использованием ИИ 🚀 Добро пожаловать в «10 дней, 10 веб-сайтов с использованием ИИ» — ежедневную серию, в которой я каждый день создаю один уникальный веб-сайт, используя разработку с помощью ИИ. Задание для создания веб-сайта приведено ниже: Выступите в роли старшего фронтенд-разработчика и моушн-дизайнера. Создайте кинематографический веб-сайт на космическую тематику с эффектом параллакса и сценами, управляемыми прокруткой. ОСНОВНОЙ ОПЫТ: Прокрутка должна создавать ощущение путешествия в открытом космосе. Интерактивный интерфейс должен быть разделен на последовательные сцены прокрутки. Одновременно должен быть виден только ОДИН основной продукт. ФОН (ОЧЕНЬ ВАЖНО): Реализуйте многослойный фон с эффектом параллакса. Фон должен включать: Медленно движущееся звездное поле Светящиеся облака в стиле туманности (мягкие градиенты, дымчатое свечение, размытие) Слои туманности должны плавно смещаться и трансформироваться, создавая ощущение живости. Фон должен двигаться медленнее, чем продукты, чтобы создать глубину. СЦЕНЫ С ПРОДУКТАМИ: Включите четыре продукта: умные часы, ноутбук, планшет, смартфон. Продукты должны отображаться в разных горизонтальных положениях: некоторые слева некоторые справа некоторые по центру По мере прокрутки пользователем: Продукт плавно появляется и «плавает» в поле зрения Кратковременно удерживает фокус Затем плавно исчезает Продукты должны четко «появляться» и «выходить» в зависимости от положения прокрутки. ВИЗУАЛЬНЫЙ СТИЛЬ ПРОДУКТОВ: Продукты могут быть изображениями или абстрактными прямоугольными формами. Каждый продукт должен иметь: Мягкую неоновую тень под ним Неоновые цвета, такие как голубой, фиолетовый, ярко-синий Интенсивность тени слегка реагирует на движение Продукт должен ощущаться парящим, а не плоским. ГЛУБИНА ПАРАЛЛАКСА: Фон туманности = самый медленный Звезды = медленный Частицы / пыль = средний Активный продукт = самый быстрый Используйте разные множители прокрутки для каждого слоя. ВЗАИМОДЕЙСТВИЕ: Активный продукт слегка наклоняется или вращается в зависимости от движения мыши. При наведении курсора отображать плавающую информационную карточку с 3-4 характеристиками. Информационные карточки плавно появляются/исчезают и остаются читаемыми. ЛОГИЯ ПРОКРУТКИ: Используйте положение прокрутки для управления: прозрачностью перемещением по оси Y / перемещением по оси Z масштабированием Используйте requestAnimationFrame для плавных обновлений. Отсутствие резких переходов. ТЕХНИЧЕСКИЕ ОГРАНИЧЕНИЯ: Использовать только HTML, CSS и чистый JavaScript. Не использовать внешние библиотеки. Полностью готов к развертыванию. Использовать только преобразования, оптимизированные для GPU. РЕЗУЛЬТАТ: Предоставить полный рабочий код. Четко прокомментировать диапазоны прокрутки для каждой сцены. Не добавлять пояснительный текст. Возвращать только окончательный код. ЦЕЛЬ: Конечный результат должен создавать ощущение захватывающего, премиального путешествия в космос, где светящиеся объекты парят и исчезают во вселенной, заполненной туманностями.