How to use pure css to achieve seamless scrolling
This article mainly shows you "how to use pure css to achieve seamless scrolling", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use pure css to achieve seamless scrolling" this article.
Seamless scrolling realized by pure css
# outer {
Width: 600px
Height: 200px
Overflow: hidden
Position: relative
}
# inner {
Overflow: hidden
Width: 1800px
Height: 200px
Position: absolute
Left: 0px
Top: 0px
Animation:move 10s cubic-bezier (0.36,0.35,1,1) infinite
}
# inner img {
Width: 150px
Height: 200px
Float: left
}
@ keyframes move {
0% {left: 0px;}
100% {left:-900px;}
}
000000000
11111111111
/ * var btn1=document.getElementsByTagName ('button') [0]
Var btn2=document.getElementsByTagName ('button') [1]
Var outer=document.getElementById ('outer')
Var inner=document.getElementById ('inner')
Outer.onmouseover=function () {
Inner.style.animationPlayState='paused'
}
Outer.onmouseleave=function () {
Inner.style.animationPlayState='running'
} * /
1. Structural construction:
You can use the ul li structure to hold the img (it is easier for me to directly leave the img in the div). Twice, the width of the div,outer is less than the width of the inner inner to facilitate scrolling by changing the value of the inner left.
Second, the rolling thought:
There are two basic ideas for seamless scrolling here.
The first is achieved by gradually increasing the scrollLeft of the parent element.
The second: through the translate of css3, the second is used here.
Third, the realization of scrolling animation:
Mainly use animation animation:
The following two button buttons use JS to control seamless scrolling (js code is commented out)
This is a relatively ugly CSS seamless scrolling, like the direct copy away!
The above is all the content of the article "how to use pure css to achieve seamless scrolling". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
