​Вдохновляющие сайты. Вращающаяся галерея

Возвращаемся к теме “Вдохновляющие ресурсы”. В моменты странствий по интернету рано или поздно вы натыкались на сайт, позволяющий красиво крутить и перелистывать изображения. Например, так.

Сделать его, конечно, же не просто. Для этого потребуются качественные знания JavaScript и CSS. Хорошая новость в том, что даже без React здесь можно обойтись)

Зайдите сюда и посмотрите конкретную реализацию. Алгоритм поворота элементов находится в функции runAnimation:

1. Понимаем, возможна ли анимация в текущий момент времени. Если нет, не продолжаем дальше.

2. Рассчитываем координаты, на которые мы хотим повернуть элемент, а также угол поворота.

3. Применяем полученные значения через CSS-свойство transform. Через style.setProperty записываем вычисленные values для translateZ, rotateX и rotateY.

Конечно же, без знания математики тут не обойтись. Поэтому подобные решения, как правило, базируются на предшествующих реализациях. А, чтобы их найти, важно правильно гуглить.

Как стать из Junior Middle-разработчиком? Разобраться в сложном коде, который был написан до вас. Внимательно осмотрите реализацию слайдера по ссылке. Постарайтесь понять все происходящее и загуглить неизвестные вещи (например, функция lerp). Поймите, чем быстрее вы научитесь считывать решения других, тем большую базу готовых вариантов в голове вы будете иметь. А из них уже легко сообразите, вариант применим к текущей задаче.

Удачи вам!