Вертикальная рулетка

надо реализовать нечто похожие на то что на картинке.

как нарисовать таблички и их двигать понятно. а вот как сделать чтоб таблички постепенно исчизали м появлялись выходя из определенного участка экрана и возвращаясь на него??

Пока на ум приходит вариант с канвасом. может есть вариант без него?

Добавлено через 1 минуту
скрин

Миниатюры

 

0

Сообщение от Develant Пока на ум приходит вариант с канвасом. может есть вариант без него?

Можно без канваса.
Примерно так:
Пишем html разметку примерно такая .box>.items>.item*N (emmet формат смотри тут)
- box это основной контейнер. для скрытия элементов за пределами контейнера устанавливаем размеры контейнеру с помощь height и свойство overflow hidden.
- items к этому элементу будет применяться свойство transform translate чтобы применилось сразу ко всем элементам item а не к каждому элементу по отдельности применять. Анимации с использованием transform обрабатываются с помощью GPU, что делает ее более плавной и менее ресурсоемкими.
- item будет содержать основной контент для отображения

Для отслеживания элементов которые скрылись за контейнером обычно используем Intersection Observer.
Простая реализация отрисовки элементов items. Добавить все элементы и потом отслеживать те которые скрылись за пределами контейнера перекидывать их из одного конца в другой с помощью appendChild – у этой функции есть интересная особенность она автоматически удаляет элемент из места откуда забирала элемент смотри пример
Как прокручивать плавно элементы опыт у тебя уже есть в этой теме

дополнительно можно по искать темы по словосочетанию infinite slider

0

Спасибо. доберусь до дома разберусь подробнее

0

Сообщение от Develant а вот как сделать чтоб таблички постепенно исчизали м появлялись выходя из определенного участка экрана и возвращаясь на него??

Используй keyframes animation и всё. Заранее для каждого объекта прописываешь анимацию.

0