Создание взрывной галереи на 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 лет.
1 view
71
24
1 month ago 00:30:53 1
Бог и Большой взрыв | Суббота Творения
1 month ago 03:00:17 1
КЫШТЫМ-57 и радиационные катастрофы Урала. Цена ядерного щита. Фильм первый: Время основателей
1 month ago 00:12:51 3
Обзор на EVERGREEN Poseidon SALTY SENSATION Superior SPRS-83H-T The “Mighty Huntsman“
1 month ago 00:00:00 1
Каменный труд. Габбродиабаз
1 month ago 00:41:49 1
🚀 ChatGPT: Бесплатный Супермозг 2024 | Решение Всех Задач за Секунды!
1 month ago 00:32:31 1
30-мин силовая тренировка всего тела и взрывная ВИИТ - Построение мышечной массы дома. 30 min. Full Body Strength Training & HIIT Power Workout | BUILD LEAN MUSCLE at Home