Как сделать вертикальную бесконечную бегущую строку из фото?
Здравствуйте,
Подскажите, пожалуйста, как сделать вертикальную бегущую строку из фото. Получается, что внутри блока есть контейнер с фото (фото разной высоты), который должен бесконечно двигаться сверху вниз без прерывания анимации. К сожалению, в интернете нужного не нашел
<div class="main__right-row"> <div class="main-cards-container"> <img class="main-card" src="img/card-1.jpg" alt="photo"> <img class="main-card" src="img/card-2.jpg" alt="photo"> <img class="main-card" src="img/card-3.jpg" alt="photo"> <img class="main-card" src="img/card-4.jpg" alt="photo"> </div> </div> |
<div class="main__right-row"> <div class="main-cards-container"> <img class="main-card" src="img/card-1.jpg" alt="photo"> <img class="main-card" src="img/card-2.jpg" alt="photo"> <img class="main-card" src="img/card-3.jpg" alt="photo"> <img class="main-card" src="img/card-4.jpg" alt="photo"> </div> </div>
.main-cards-container { width: 217px; display: flex; flex-direction: column; } |
.main-cards-container { width: 217px; display: flex; flex-direction: column; }
Дополнительно:
По сути любой слайдер вам подойдет... с функциями loop и auto slide через промежуток времени,а чтобы сделать плавно идущую строку, думаю много сил не потребуется
snippet
- Спасибо!
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания вертикальной бесконечной бегущей строки из фото можно воспользоваться следующим подходом:
1. Начнем с HTML-кода для создания контейнера, в котором будет отображаться бегущая строка. Например:
<div class="scrolling-container"> <img src="your-image.jpg" alt="Your Image"> </div><div class="scrolling-container"> <img src="your-image.jpg" alt="Your Image"> </div>
2. Далее, добавим стили CSS для контейнера и изображения:
.scrolling-container { height: 100vh; /* Высота контейнера равна высоте экрана */ overflow: hidden; /* Скрытие части изображения, которое выходит за пределы контейнера */ } .scrolling-container img { animation: scroll 10s linear infinite; /* Анимация бегущей строки */ } @keyframes scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } /* Изображение будет двигаться вверх */ }
3. Теперь изображение будет бесконечно прокручиваться вверх в контейнере. Вы можете настроить скорость и направление движения изображения, а также добавить дополнительные стили по своему усмотрению.
Этот код позволит вам создать вертикальную бесконечную бегущую строку из фото на вашем веб-сайте. Не забудьте заменить "your-image.jpg" на путь к вашему изображению.