А вы знаете, что данный слайдер можно сделать без использования JavaScript? 📣 — 10 апреля 2026 г. в 11:41:37.053
А вы знаете, что данный слайдер можно сделать без использования JavaScript? 📣 Расскажу коротко, как работает данный эффект: Вся суть здесь строится на трёх вещах: CSS-переменные, 3D-трансформации и анимация. В Pug просто генерируются карточки и для каждой задаётся индекс через переменную --i, а также общее количество элементов --n. Это нужно лишь для того, чтобы дальше посчитать в SCSS всё автоматически. А теперь самое интересное: каждая карточка поворачивается по оси Y на свой угол. Он вычисляется по формуле "1 поворот / количество элементов". То есть происходит равномерное раскладывание всех картинок по кругу. После этого используется translateZ. Он отодвигает карточки назад, формируя объёмное кольцо. А чтобы вся конструкция ожила — родительскому контейнеру задаётся бесконечная анимация вращения. На самом деле, просто крутится по оси Y, и за счёт этого создаётся эффект слайдера. Почему всё это выглядит как 3D? Потому что у родителя задан perspective. Чем меньше значение, тем сильнее ощущается глубина. В итоге получается, что карточки стоят по кругу, контейнер вращается, а вы видите это как бесконечный слайдер без единой строчки JavaScript Сохраните, чтобы не потерять, и напиши в комментариях, нужно ли делать разбор подобных сложных 3D-анимаций? А если вы сами хотите научиться создавать такие веб-шедевры, то приходите на курс по веб-анимации, где вы узнаете обо всех фишках и технологиях. Будете потом сами всех удивлять! 😏