第二个 Instagram 按钮的 CSS 属性

Question

Евгения

Asked:2024-09-30 17:33:07 +0000 UTC2024-09-30 17:33:07 +0000 UTC 2024-09-30 17:33:07 +0000 UTC

如何使用js css html实现两个块的无尽垂直动画

772

现在有了这个结果，如何让这一切不断发生呢？我们需要图片朝不同的方向移动。

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 个回答

Voted

UModeL · Answer 1 · 2024-09-30T22:54:04Z

为了连续发生滚动，必须满足以下条件：

必须复制该组图像，并按照相同的顺序在原件之后添加副本；
主集合的总高度（或水平类型的宽度）必须大于可滚动容器的高度（宽度）；
将块滚动 50%（不是 100！）。

将填充过程移至单独的函数中也是值得的，以免为不同的块重复代码：

const imagesOne = ['https://isstatic.askoverflow.dev/MraLT.jpg', 'https://isstatic.askoverflow.dev/VxVNC.jpg', 'https://isstatic.askoverflow.dev/A9VLC.jpg', 'https://isstatic.askoverflow.dev/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>

更多关于无尽“跑步者”的话题：一和二。

如何使用js css html实现两个块的无尽垂直动画

我看不懂措辞

请求的模块“del”不提供名为“default”的导出

"!+tab" 在 HTML 的 vs 代码中不起作用

我正在尝试解决“猜词”的问题。Python

可以使用哪些命令将当前指针移动到指定的提交而不更改工作目录中的文件？

Python解析野莓

问题：“警告：检查最新版本的 pip 时出错。”

帮助编写一个用值填充变量的循环。解决这个问题

尽管依赖数组为空，但在渲染上调用了 2 次 useEffect

数据不通过 Telegram.WebApp.sendData 发送

如何使用js css html实现两个块的无尽垂直动画

1 个回答

相关问题