Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.