Создание взрывной галереи на 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
101
28
3 years ago 02:46:53 57
Создание взрывной галереи на JavaScript | Анимации JavaScript
8 years ago 00:04:14 2
Игорь Саплин - Создание лендинга с взрывной конверсией
8 years ago 00:06:22 39
ВЗРЫВНОЙ ПСИХ !! Террон Бэкхем
6 years ago 00:04:12 69
Ремонт взрывной автомагнитолы Erisson
3 years ago 00:08:40 32
Сложности ВЗРЫВНОЙ разработки | Gamedevlog (Трудности Гейдева)
2 years ago 00:00:44 139
Создание сферических резервуаров взрывным способом
6 years ago 00:10:40 7
Разговор о творчестве: [Взрывной характер]
9 years ago 00:15:15 307
1 часть Создание Вселенная Большой взрыв
7 years ago 00:49:26 0
Урок 1. Создание взрывного контента
11 years ago 00:24:09 379
Новый урок по созданию взрывной волны в After Effects от Video Copilot!
9 years ago 00:02:21 16
Пошаговое создание Progressive House трека. Обойма взрывных методов аранжировки и развития идеи
7 years ago 00:04:29 38
Как за 60 секунд создать Взрывной заголовок | GeniusMarketing
5 years ago 00:03:16 12
VoxelLapse: Создаем Взрывной светильник Джека из игры Terraria / Create Jack Explosive Light
5 years ago 01:44:45 150
Бесплатный мастер-класс «Взрывной подарок», свитдизайн. Мастер Наталья Дроздова.
13 years ago 00:08:10 61
Тутур создание взрыва
6 years ago 00:42:40 430
Новый взрывной ведущий в Сочи о свадьбах, курьезах и черноморском ивенте.
12 years ago 00:41:06 38
Unity урок, создание взрыва
6 years ago 00:45:11 11
Создание Вселенной. Большой взрыв. HD.
8 years ago 00:10:38 184
Создание реалистичного огня. Взрыва. Дыма
12 years ago 00:05:41 172
Создание простого взрыва в Blender
8 years ago 00:09:55 2
FX Анриляшь #5. Взрывной эффект.
12 years ago 00:00:51 15
Взрывной трейлер
11 years ago 00:08:58 39
Взрыв в 3ds max. Создание простой детонации объекта
7 years ago 00:03:28 24
Как создать взрывной поток горячих контактов в ваш бизнес от 5 партнеров ежедневно