Как сделать бесконечный горизонтальный скролл в обе стороны?
1) Имею вот такой код уже - https://codepen.io/magalalka/pen/xxeVgqo
2) Надо довести его до такого результата - https://owlfurnitureandobjects.com/ (сразу после прелоадера)
Что у меня не получается:
1) Скролл влево сразу после загрузки страницы, для него надо немного пролистывать вправо. это не ок, но не знаю как исправить
2) Не получилось сделать скроллы вверх и вниз, я пробовала, но что-то не то. Имеется ввиду, что когда скролю вниз, то картинки листаются в правую сторону, а если вверх, то наоборот. Если что, то я сижу с мака, но всё равно как в сайте примере не получается.
Спасибо!
Дополнительно:
такое чувство, что там просто мгновенная перемотка вправо происходит, когда колесо вверх крутишь от начала
т.е. там нет никакой бесконечной прокрутки, в дом слева ничего не накидывается. Все поверх нативного скролла работает
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания бесконечного горизонтального скролла в обе стороны можно использовать CSS и JavaScript. Вот пример решения данной задачи:
1. HTML:
```html
```
2. CSS:
```html
.scroll-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
}
.scroll-content {
display: inline-block;
animation: scroll 10s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
```
3. JavaScript (необязательно, но может понадобиться для динамического добавления контента):
```html
const scrollContent = document.querySelector('.scroll-content');
const newContent = document.createElement('div');
newContent.textContent = 'Новый контент';
scrollContent.appendChild(newContent);
```
В данном примере мы создаем контейнер с классом 'scroll-container', внутри которого находится контент с классом 'scroll-content'. С помощью CSS мы задаем стили для контейнера и контента, а также анимацию для бесконечного горизонтального скролла.
При необходимости можно использовать JavaScript для динамического добавления контента в скроллируемую область.
Таким образом, с помощью данного кода можно создать бесконечный горизонтальный скролл в обе стороны на вашем веб-сайте.