Космический проект
12 июля 2022 года телескоп Webb прислал первое полноценное фото чужих галактик в высоком разрешении. Чтобы оценить, насколько продвинулись технологии, сделаем слайдер «было — стало» и сравним новое фото со старым от телескопа Хаббл.
Логика проекта
Чтобы сделать такое, нам нужно расположить две фотографии на странице в одном и том же месте, только одну сделать как бы поверх другой. Когда перемещается слайдер, на самом деле мы изменяем координаты правой стороны левой картинки (которая выше) — так кажется, что одно фото превращается в другое.
Для этого мы сделаем так:
- Создаём на странице общий контейнер для картинок и по одному для каждой по отдельности — это сделаем в HTML-файле.
- Рисуем рамки и разделитель с кругляшом посередине — за это отвечают стили.
- Добавляем обработчик сдвига разделителя — он поменяет границу правого фото в соответствии с положением слайдера. Вынесем это в файл скрипта.
- Чтобы проект работал на смартфонах, добавим обработку нажатия на экран, чтобы слайдер плавно переезжал на место касания. То же сделаем в скрипте.
Создаём страницу
На странице всё стандартно: подключаем файл со стилями, добавляем jQuery, а в конце не забываем прописать путь к скрипту. Но кое-что новое тоже есть: мы ещё подключаем библиотеку jQuery UI для работы с интерфейсом. Нас интересует обработчик перетаскивания элементов — чтобы не писать свой код работы со слайдером, используем готовую библиотеку.
Также мы используем сокращённый вариант написания тега <img> — у него нет парного закрывающего тега, вместо него используется слеш перед скобкой.
Делим картинку пополам и оформляем слайдер
Чтобы квадратная картинка всегда занимала максимальную площадь окна браузера, пойдём на хитрость: найдём, что меньше, высота или ширина окна, и используем это как наш размер. В этом нам поможет CSS-команда min () — она находит минимальное значение среди аргументов. Теперь, даже если мы растянем браузер на всю ширину или высоту, картинка подстроится под новые размеры.
Мы используем 90vh вместо 100vh, чтобы не появлялись полосы прокрутки — у нас ещё есть отступы от края картинки, которым тоже нужно предусмотреть место на экране. Попробуйте ради интереса везде в коде число 90 заменить на 100 и посмотрите, что получится.
Теперь всё выглядит красиво, но ещё нужен слайдер, чтобы можно было за него ухватиться мышкой и подвигать влево-вправо. Сделаем его из двух частей — вертикальной полоски и кругляша посередине. Кругляш сделаем из прямоугольника, у которого все углы скруглённые на 100% — это проще, чем рисовать круг.
Пишем скрипт
Визуально у нас всё красиво, но ничего подвигать нельзя — для этого нужно написать скрипт. Он будет состоять из трёх частей: реакции на сдвиг, клик по картинке и анимации сдвига при клике. Обработка клика нужна для того, чтобы проект работал на смартфонах — не все они поддерживают нужные возможности jQuery и могут обработать сдвиг слайдера. Вместо этого мы будем получать координаты клика и плавно сдвигать туда слайдер.
Теперь всё работает как нужно и мы можем оценить качество съёмки нового телескопа по сравнению со старым.
Посмотреть работу слайдера на странице проекта.
