Создание взрывной галереи на JavaScript | Анимации JavaScript

Полностью напишем анимированную взрывную галерею на чистом JavaScript. ❤️ Мой telegram канал: ❤️ Верстать вместе со мной: ❤️ Если сложно стартовать с Gulp, то старт на чистых технологиях HTML, CSS, JS: Рекомендуемые видео: 🎄Учимся использовать стек и очередь в JavaScript — 🎄Пишем вместе throttle и debounce | Уроки JavaScript — 🎄Настраиваем сборку проекта через GulpJS | brew, nvm, nodejs npm — 🎄Сброс и нормализация стилей, вёрстка с нуля | HTML, CSS — 🎄Единицы измерения CSS: px, em, rem, %, vw, vh, vmin, vmax, ex, ch — 00:00 Что будем создавать? 02:00 Скачивание и настройка проекта. 04:12 Изучаем внутреннюю структуру проекта. 06:14 Разбираем основной HTML. 11:23 Продолжаем изучать содержимое проекта. 16:06 Добавляем стили для списка изображений. 37:15 Начинаем работать с JS галереи. 42:12 Начинаем писать класс ExplosionGallery. 49:34 Инициализация модального окна. 01:01:21 Добавляем метод events. 01:11:57 Оформляем модальное окно в CSS. 01:14:45 Оформляем стили для внутренних элементов 01:29:05 Начальное расположение элементов JS. 01:39:11 Движение изображений на позиции. 01:41:04 Располагаем изображения. 02:10:01 Подъём навигации. 02:14:24 Устанавливаем состояния контролов. 02:16:58 Обновляем счётчик. 02:18:16 Работаем с описанием. 02:26:45 Добавляем клики по навигации. 02:29:29 Растворение текста описания при смене изображений. 02:33:01 Реализуем закрытие галереи. 02:37:19 Добавляем resize. 02:39:34 Закрытие по клавише esc. 02:42:25 Тестирование. 02:44:01 Фиксим баг в safary. Рекомендую посмотреть ВСЕ ВИДЕО на моём канале! 😈 Я рассматриваю различные темы веб-разработки. На текущий момент: профессиональный JavaScript, вёрстка, примеры на чистых технологиях (React, NodeJs, JS, CSS, HTML) и опыт в 10 лет.