Как реализовать бесконечную вертикальную анимацию двух блоков на js css html
Сейчас есть вот такой результат , как сделать так чтобы это было все беспрерывно? Нужно чтобы картинки двигались в разных направлениях
const imagesOne = [
'assets/img/main-1.jpg',
'assets/img/main-2.jpg',
'assets/img/main-3.jpg'
];
const imagesTwo = [
'assets/img/main-4.jpg',
'assets/img/main-5.jpg',
'assets/img/main-6.jpg'
];
const boxOne = document.querySelector('.ag_main-right_one');
const boxTwo = document.querySelector('.ag_main-right_two');
imagesOne.forEach(src => {
const img = document.createElement('img');
img.className = 'ag_main-right_img';
img.src = src;
img.alt = 'main';
boxOne.appendChild(img);
});
imagesTwo.forEach(src => {
const img = document.createElement('img');
img.className = 'ag_main-right_img';
img.src = src;
img.alt = 'main';
boxTwo.appendChild(img);
});.ag_main-right {
height: 700px;
overflow: hidden;
position: relative;
width: 100%;
max-width: 574px;
}
.ag_main-right_box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 25px;
position: absolute;
-webkit-transition: -webkit-transform 0.5s ease;
transition: -webkit-transform 0.5s ease;
-o-transition: transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
/* Добавляем плавность перехода */
}
.ag_main-right_img {
max-width: 277px;
width: 100%;
border-radius: 30px;
-o-object-fit: cover;
object-fit: cover;
}
.ag_main-right_one {
left: 0;
-webkit-animation: scrollDown 10s linear infinite;
animation: scrollDown 10s linear infinite;
top: 0;
}
.ag_main-right_two {
right: 0;
top: 0;
-webkit-animation: scrollUp 10s linear infinite;
animation: scrollUp 10s linear infinite;
}
@-webkit-keyframes scrollDown {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
}
@keyframes scrollUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
}
} <div class="ag_main-right">
<div class="ag_main-right_box ag_main-right_one">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
</div>
<div class="ag_main-right_box ag_main-right_two">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
<img class="ag_main-right_img" src="https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg" alt="main">
</div>
</div>Ответы (1 шт):
Автор решения: UModeL
→ Ссылка
Чтобы прокрутка шла непрерывно, нужно соблюсти следующие условия:
- Набор изображений необходимо продублировать, добавив копии после оригиналов в том же порядке;
- Суммарная высота (или ширина для горизонтального типа) основного набора должна быть больше высоты (ширины) прокручиваемого контейнера;
- Прокручивать блок на 50% (не на 100!).
Также сто́ит вынести процесс заполнения в отдельную функцию, дабы не дублировать код для разных блоков:
const imagesOne = ['https://i.stack.imgur.com/MraLT.jpg', 'https://i.stack.imgur.com/VxVNC.jpg', 'https://i.stack.imgur.com/A9VLC.jpg', 'https://i.stack.imgur.com/oYG0R.jpg'];
const imagesTwo = ['https://cache3.youla.io/files/images/780_780/5b/58/5b5827cf22a449378552f293.jpg', 'https://i.imgur.com/pCm96IG.png'];
const boxOne = document.querySelector('.ag_main-right_one');
const boxTwo = document.querySelector('.ag_main-right_two');
function fAddImages(arrImgSrc, targetBox) {
let imgTags = '';
arrImgSrc.forEach(src => { imgTags += `<img class="ag_main-right_img" src="${src}" alt="main">` });
targetBox.insertAdjacentHTML('beforeend', imgTags.repeat(2));
}
fAddImages(imagesOne, boxOne);
fAddImages(imagesTwo, boxTwo);.ag_main-right {
position: relative;
height: 700px; width: 100%;
max-width: 574px;
overflow: hidden;
}
.ag_main-right_box {
position: absolute;
display: flex;
flex-direction: column;
gap: 25px;
}
.ag_main-right_img {
width: 100%;
max-width: 277px;
border-radius: 30px;
object-fit: cover;
}
.ag_main-right_one {
top: 0; left: 0;
animation: scrollDown 5s linear infinite;
}
.ag_main-right_two {
top: 0; right: 0;
animation: scrollDown 5s linear infinite reverse;
}
@keyframes scrollDown { to { transform: translateY(-50%); }}<div class="ag_main-right">
<div class="ag_main-right_box ag_main-right_one"></div>
<div class="ag_main-right_box ag_main-right_two"></div>
</div>