tgoop.com/code_and_travel/259
Last Update:
Вдохновляющие сайты. Вращающаяся галерея
Возвращаемся к теме “Вдохновляющие ресурсы”. В моменты странствий по интернету рано или поздно вы натыкались на сайт, позволяющий красиво крутить и перелистывать изображения. Например, так.
Сделать его, конечно, же не просто. Для этого потребуются качественные знания JavaScript и CSS. Хорошая новость в том, что даже без React здесь можно обойтись)
Зайдите сюда и посмотрите конкретную реализацию. Алгоритм поворота элементов находится в функции runAnimation:
1. Понимаем, возможна ли анимация в текущий момент времени. Если нет, не продолжаем дальше.
2. Рассчитываем координаты, на которые мы хотим повернуть элемент, а также угол поворота.
3. Применяем полученные значения через CSS-свойство transform. Через style.setProperty записываем вычисленные values для translateZ, rotateX и rotateY.
Конечно же, без знания математики тут не обойтись. Поэтому подобные решения, как правило, базируются на предшествующих реализациях. А, чтобы их найти, важно правильно гуглить.
Как стать из Junior Middle-разработчиком? Разобраться в сложном коде, который был написан до вас. Внимательно осмотрите реализацию слайдера по ссылке. Постарайтесь понять все происходящее и загуглить неизвестные вещи (например, функция lerp). Поймите, чем быстрее вы научитесь считывать решения других, тем большую базу готовых вариантов в голове вы будете иметь. А из них уже легко сообразите, вариант применим к текущей задаче.
Удачи вам!
BY Code&Travel
Share with your friend now:
tgoop.com/code_and_travel/259