是否可以创建相同 html 元素的无限循环,从顶部滚动到底部,具有类似门户的效果?
Is it possible to create an endless loop of the same html elements, scrolling from the top to the bottom with a portal like effect?
我正在尝试使用一组 html 元素创建一个无限循环的动画,类似于选取框。
目标是在动画开始时让所有元素在容器中可见,每个元素都向下滑动。一旦底部元素开始超出框架,它就会再次出现在容器的顶部。
到目前为止,我所做的是复制我想要重复的元素,并为每组元素添加不同的动画。第一组元素的动画设置为从屏幕开始,然后一直向下离开屏幕的另一端,所用时间是第二组元素动画所用时间的两倍。
第二组元素将从容器顶部开始并从那里离开屏幕。
我得到了这个动画的第一次迭代所需的结果,但随后有一个巨大的白色 space。所以,我并没有真正正确地重复动画。
我想我可以使用 javascript 来设置一个间隔,这样每次动画结束时我都可以将元素重新定位回它们的起始点,但我不确定这是否是最好的实现这一目标的方法。
.slider {
height: 200px;
background-color: #ddd;
border:solid 1px black;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
position: relative;
display:flex;
justify-content: flex-start;
flex-direction: column;
}
.slide{
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: 20px;
position: absolute;
width:100%;
}
.slide > div{
height:calc(200/8);
width:100%;
border:solid 1px red;
display:flex;
justify-content: center;
}
.one{
top:-100%;
animation:slider2 18s linear infinite;
}
.two{
top:0px;
animation: slider 9s linear infinite;
}
@keyframes slider {
0% { top:0px; }
100% { top:100% }
}
@keyframes slider2{
0% { top:-100%; }
100% { top:100% }
}
<body>
<div class='slider'>
<div class='slide one'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div class='slide two'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
https://codepen.io/Nerdpuff/pen/PoPXNpQ
问题是动画没有在正确的时间 'reset'。
我已经更改了它,所以两个动画都采用 9s
并且都具有相同的差异。但他们堆叠。
当slider2
即将top: 0%
并重置时,slider
在0%
和'continues the loop'启动。
我正在尝试使用一组 html 元素创建一个无限循环的动画,类似于选取框。 目标是在动画开始时让所有元素在容器中可见,每个元素都向下滑动。一旦底部元素开始超出框架,它就会再次出现在容器的顶部。
到目前为止,我所做的是复制我想要重复的元素,并为每组元素添加不同的动画。第一组元素的动画设置为从屏幕开始,然后一直向下离开屏幕的另一端,所用时间是第二组元素动画所用时间的两倍。
第二组元素将从容器顶部开始并从那里离开屏幕。
我得到了这个动画的第一次迭代所需的结果,但随后有一个巨大的白色 space。所以,我并没有真正正确地重复动画。
我想我可以使用 javascript 来设置一个间隔,这样每次动画结束时我都可以将元素重新定位回它们的起始点,但我不确定这是否是最好的实现这一目标的方法。
.slider {
height: 200px;
background-color: #ddd;
border:solid 1px black;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
position: relative;
display:flex;
justify-content: flex-start;
flex-direction: column;
}
.slide{
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: 20px;
position: absolute;
width:100%;
}
.slide > div{
height:calc(200/8);
width:100%;
border:solid 1px red;
display:flex;
justify-content: center;
}
.one{
top:-100%;
animation:slider2 18s linear infinite;
}
.two{
top:0px;
animation: slider 9s linear infinite;
}
@keyframes slider {
0% { top:0px; }
100% { top:100% }
}
@keyframes slider2{
0% { top:-100%; }
100% { top:100% }
}
<body>
<div class='slider'>
<div class='slide one'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
<div class='slide two'>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</div>
</body>
https://codepen.io/Nerdpuff/pen/PoPXNpQ
问题是动画没有在正确的时间 'reset'。
我已经更改了它,所以两个动画都采用 9s
并且都具有相同的差异。但他们堆叠。
当slider2
即将top: 0%
并重置时,slider
在0%
和'continues the loop'启动。