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

Полностью напишем анимированную взрывную галерею на чистом JavaScript.
🏰 Английский YouTube: @webelart_en

Рекомендуемые видео:

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+ лет.

[volodymyrdoskochinskiy]

Неимоверно. Вы очень крутой разработчик!

[Voojinful]

сам себя не похвалишь - никто не похвалит) ну а если без шуток, то это действительно охренительно выглядит и функционирует!)

[quite]

Вауууу, огромное Вам спасибо!😍 Очень интересно!😍

[АндрейБ-пян]

огромнео спасибо за галлерею. шаллерея и правда огонь!!!

[ЮрийКаракулов-мт]

Лена, красотулька такая!
Не могу смотреть урок, постоянно отвлекаюсь))) 😘

[shwarcz]

Классно, но сложно !) Повторить смог, но чувствую, что в некоторых моментах бездумно). Елена спасибо, галерея супер!

[IvanYaremenko-ovkz]

Повторил на ангуляре. Спасибо вы супер;))

[kosha]

Вааау, супер! Спасибо, что поделились знаниями)

[mariamartseniuk]

Делала похожий слайдер. Интересно будет посмотреть ваше видео)

[ОлегСтранник-йы]

Увидел красоту - начинаю верстать красоту)Спасибо за отличную галерею Елена!

[ЮрійДмитрик-вв]

Это очень впечаетляет, очень захотелось попробовать повторить) надеюсь за целый день справлюсь:)
мое почтение и увадение! однозначно лайк!

[paint-alexandra]

Спасибо за видео, красотища! Тоже люблю анимацию)

[EddiMOffical]

Я бы сделал по другому. Создаем массив ячеек в цикле, где каждой ячейке будет соответствовать состояние. Создаем дубликат массива, но он будет уже динамический. И создаем правило по которому каждый элемент будет менять свой индекс. Например, правило +1 значит, что каждый элемент будет брать состояние у следующего элемента и применять к себе и так делает каждый. Правило -1 значит, что каждый элемент берет состояние у предыдущего. Если использовать правило +2 -2 и тд, то есть шанс, что элементы возьмут одинаковое состояние и тогда нужна функция пересчета. Состоянием может быть что угодно и правила можно применять какие угодно. Можно даже динамически менять массив состояний, тогда галерея будет постоянно менять свой внешний вид.

[sergeiverenikin]

Лайк сразу. Спасибо за интересный урок.

[КонстантинЕгоров-юу]

Спасибо за урок. А можно отдельным файлом исходники и картинки, для тех кто не умеет в галп и ноду, чтобы можно было хотя бы попробовать повторить самому?

[MrSidinc]

Просто JS -богиня =)

В HTML хотелось бы побольше семантики)
В CSS побольше БЭМа и "нормальный" препроцессор)

[mind]

Это очень круто! Спасибо) с удовольствике смотрю видео твои. Можно побольше всяких таких нестандартных штук ?))
И еще вопрос. Если я стартую с чистых технологий, тоесть без сборщика. Могу ли я как-то писать с использованием stylus чтобы он сам компилировался в css.
Или это только с помощью сборщика?

[Tavda]

Я в 2015-16 годах хотел создать галерею. Но тогда не хватало навыков, а также тормозил IE 8.0 (что тоже очень сильно тормозило разработку, т.к. я не знал о существовании autoprefixer, о сборке js файлов. И до сих пор так и решил задачу, даже без учёта IE. А суть простая - нужно отображать просто галерею из фото с объектов, где на каждом фото можно применить лупу. Вроде бы просто... но теперь уже лень, потому что бросил тот проект в 2016 году.

[WanKy]

Спасибо за видео, много полезного. Обязательно ли убирать у кнопок переключений вперёд/назад preventDefault?, убрал - и вроде как ничего не поменялось. Для длинного текста в элементах SummaryContent можно добавить стили:
text-overflow: ellipsis
overflow: hidden
Стили будут обрезать текст и показывать точечки)

[Dodjer]

Классно получилось, Вы просто умничка!!!
А Вы можете выложить уже готовое решение на гид, я сам просто начинающий и при написании кода допускаю много ошибок?