Infinite scroll beating and text

We do infinite scroll effect with HTML5 + CSS3

⑴ logical analysis

⑵ practical example

5 images before image display area for all, assume that the total length of 1100px;

It appears behind the five picture for cloning region, just in front of the copy of a picture;

The contents of five and five sheets after "bundling" in a ul, scroll the time, it can make them whole moved

For convenience a large, try to set a point ul width, so can accommodate a sufficient number of images, the images including cloning

Code Example:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
 
        #container{
            width:800px;
            height:300px;
            margin:100px auto;
            overflow: hidden;
            position: relative;
        }
 
        #container ul{
            list-style: none;
            width:4000px;
            left:0;
            top:0;
            position: absolute;
            -webkit-animation:scoll 6s linear 0s infinite;
        }
 
        #container ul li{
            float:left;
            margin-right:20px;
        }
 
        @-webkit-keyframes scoll{
            from{
                left:0;
            }
            to{
                left:-1100px;
            }
        } 
        
    </style>
</head>
<body>
    <div id="container">
        <ul>
            <li><a href="#"><img src="xz6.jpg" /></a></li>
            <li><a href="#"><img src="xz2.jpg" /></a></li>
            <li><a href="#"><img src="xz3.jpg" /></a></li>
            <li><a href="#"><img src="xz4.jpg" /></a></li>
            <li><a href="#"><img src="xz1.jpg" /></a></li>
            <li><a href="#"><img src="xz6.jpg" /></a></li>
            <li><a href="#"><img src="xz2.jpg" /></a></li>
            <li><a href="#"><img src="xz3.jpg" /></a></li>
            <li><a href="#"><img src="xz4.jpg" /></a></li>
            <li><a href="#"><img src="xz1.jpg" /></a></li>
        </ul>
    </div>
</body>
</html>

Renderings:

(Ii) to do with HTML5 + CSS3 Text beating

Analysis of ideas:

1. Since the text layering beat, so we should "all broken up", each character has its own "space."

2. each character have after having first beat, so we should be long animation of each character increment.

3. span default tag line within an element; float after the operation, but they are, they become block-level elements.

The sample code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
 
        h2 span{
            float:left;
            position: relative;
        }
 
        h2 span:nth-child(1){
            -webkit-animation:jump 1s linear 0s infinite alternate;
        }
 
        h2 span:nth-child(2){
            -webkit-animation:jump 1s linear 0.2s infinite alternate;
        }
 
        h2 span:nth-child(3){
            -webkit-animation:jump 1s linear 0.4s infinite alternate;
        }
 
        h2 span:nth-child(4){
            -webkit-animation:jump 1s linear 0.6s infinite alternate;
        }
 
        h2 span:nth-child(5){
            -webkit-animation:jump 1s linear 0.8s infinite alternate;
        }
 
 
        @-webkit-keyframes jump
        {
            0%{
                top:0px;
                color:red;
            }
            50%{
                top:-10px;
                color:green;
            }
            100%{
                top:10px;
                color:blue;
            }
        }
 
    </style>
</head>
<body>
    <h2>
        <span>石</span>
        <span>海</span>
        <span>莹</span>
        <span>的</span>
        <span>博</span>
        <span>客</span>
    </h2>
</body>
</html>

效果图：

参考：https://blog.csdn.net/sinat_27706697/article/details/49699367

Infinite scroll beating and text

Guess you like