Introduction: The function of cyclically displaying information in the page is usually implemented with js, so how to implement it with CSS3?
Sometimes in a certain module of the page, it is necessary to scroll some messages in an infinite loop. So what is the idea of using js to achieve seamless scrolling (for example, our module scrolls up)?
-
Clone A with an exact copy of data B and place it behind the original data A;
-
Use setIntervalscroll up A's parent container;
-
When the distance L scrolled up is exactly the height of A (L==A.height()), L=0, restart the scrolling, infinite loop.
A clone of data is placed in the back, so that when A moves up, there is data behind to fill in the gaps that are leaked. When B moves to the top of the visible area, and A just moves out of the visible area, then the container is reset to 0 at this time, and the user does not perceive it, thinking that it is still the first piece of data in B. Then keep scrolling up.
1. Using CSS3 to achieve
If you want to use CSS3 properties, it animationmust be, because transition needs to be triggered manually, and it cannot be executed infinitely, but it animationcan solve this problem.
If the data is hard-coded, we can copy a copy of the data manually and put it in the back, and then write the height of the original data into css. The idea is the same as the above:
css:
@keyframes rowup {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(0, -307px, 0);
transform: translate3d(0, -307px, 0);
}
}
.list{
width: 300px;
border: 1px solid #999;
margin: 20px auto;
position: relative;
height: 200px;
overflow: hidden;
}
.list .rowup{
-webkit-animation: 10s rowup linear infinite normal;
animation: 10s rowup linear infinite normal;
position: relative;
}
html:
<div class="list">
<div class="cc rowup">
<div class="item">1- 121233fffffr国家认可更健康进口价格困扰</div>
<div class="item">2- 3123233</div>
<div class="item">3- 个人口结构俄跨入国际科技馆客人感觉</div>
<div class="item">4- ggrgerg</div>
<div class="item">5- fvdgdv</div>
<div class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</div>
<div class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</div>
<div class="item">8- 德国网红致信默克尔</div>
<div class="item">9- 国资委原</div>
<div class="item">1- 121233fffffr国家认可更健康进口价格困扰</div>
<div class="item">2- 3123233</div>
<div class="item">3- 个人口结构俄跨入国际科技馆客人感觉</div>
<div class="item">4- ggrgerg</div>
<div class="item">5- fvdgdv</div>
<div class="item">6- 德国南部巴士与卡车相撞起火 31人受伤11人死亡朴槿惠庭审时突然昏迷 支持者：她死了法官要负责！</div>
<div class="item">7- 外交部再次回应印军越界:要求立即将越界部队撤回</div>
<div class="item">8- 德国网红致信默克尔</div>
<div class="item">9- 国资委原</div>
</div>
</div>
The effect of running is as follows:
1- 121233fffffr National Approval Healthier Import Price Troubled
2- 3123233
3- Demographic structure of Russia entering the International Science and Technology Museum, the feeling of guests
4- ggrgerg
5- fvdgdv
6- In southern Germany, a bus and a truck collided and caught fire. 31 people were injured and 11 people died. Park Geun-hye suddenly fainted during the trial. Supporters: she died, the judge is responsible!
7- The Ministry of Foreign Affairs once again responded that the Indian army crossed the border: demanded the immediate withdrawal of the cross-border troops
8- German internet celebrity sends a letter to Merkel
9- Former SASAC
1- 121233fffffr National Approval Healthier Import Price Troubled
2- 3123233
3- Demographic structure of Russia entering the International Science and Technology Museum, the feeling of guests
4- ggrgerg
5- fvdgdv
6- In southern Germany, a bus and a truck collided and caught fire. 31 people were injured and 11 people died. Park Geun-hye suddenly fainted during the trial. Supporters: she died, the judge is responsible!
7- The Ministry of Foreign Affairs once again responded that the Indian army crossed the border: demanded the immediate withdrawal of the cross-border troops
8- German internet celebrity sends a letter to Merkel
9- Former SASAC
2. When the data is uncertain
在上面的小节中，数据是死的，高度也是写死到了CSS3中。可是如果从接口获取到的数据个数不定呢，每条数据的长度也不确定，怎么办呢？
这里就需要根据数据来重新计算高度，并写到CSS里，可是keyframes修改起来还比较麻烦，那么我们就用覆盖的方式来重新keyframes中的数据：
function addKeyFrames(y){
var style = document.createElement('style');
style.type = 'text/css';
var keyFrames = '\
@-webkit-keyframes rowup {\
0% {\
-webkit-transform: translate3d(0, 0, 0);\
transform: translate3d(0, 0, 0);\
}\
100% {\
-webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
}\
}\
@keyframes rowup {\
0% {\
-webkit-transform: translate3d(0, 0, 0);\
transform: translate3d(0, 0, 0);\
}\
100% {\
-webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
}\
}';
style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
document.getElementsByTagName('head')[0].appendChild(style);
}
计算出原始数据A的高度后，执行 addKeyFrames 方法，往head中添加css属性，那么这里的rowup就会覆盖掉之前设置的，每次滚动的距离就是数据A的高度：
function init(){
var data = '塞下秋来风景异，衡阳雁去无留意。四面边声连角起，千嶂里，长烟落日孤城闭。浊酒一杯家万里，燕然未勒归无计。羌管悠悠霜满地，人不寐，将军白发征夫泪。',
data_len = data.length,
len = parseInt(Math.random()*6)+6,
html = '<div class="ss">';
for(var i=0; i<len; i++){
var start = parseInt( Math.random()*(data_len-20) ),
s = parseInt( Math.random()*data_len );
html += '<div class="item"v>'+i+'- '+data.substr(start, s)+'</div>';
}
html += '</div>';
document.querySelector('.list .cc').innerHTML = html+html;
var height = document.querySelector('.list .ss').offsetHeight;
addKeyFrames( '-'+height+'px' );
document.querySelector('.list .cc').className += ' rowup';
}
init();
可以【查看实例】，这样在CSS3与js的结合下，更完美的呈现无缝滚动。
3. 横向滚动
上面讲解的都是向上滚动，那么向左，向右，向下也比较容易理解了，把transform中的值更改为对应的数值即可。
4. 总结
使用CSS来进行动画的展示，会让页面显得更加流畅。如果能用CSS实现，可以尝试尽量用CSS实现下
转载自：https://www.xiabingbao.com/css3/2017/07/03/css3-infinite-scroll.html