H5 animation in the mobile terminal barrage

Thinking

1. The single contents edited, their width is calculated to determine the initial position
2. Moving the screen width is the distance

3. js css dynamically add animation function, the height, the moving time animation, the animation time delay control using a random number

Code:

html skeleton structure

(With three, for example, if they feel too unfriendly interface can also be dynamically generated js)

< Div class = "Cute-Barrage" > 
    < div class = "Barrage-div" > 
        < IMG the src = "http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg" /> 
        < span > in January once the repayment period to spend chant it < i > ha </ i > </ span > 
    </ div > 
    < div class = "Barrage-div" > 
        < img src = "HTTP: // kw1 -1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg"/> 
        < Span > wait wages < I > oh oh </ I > </ span > 
    </ div > 
    < div class = "Barrage-div" > 
        < IMG the src = "../../ static / cutePresent / Resource / avatar.png " /> 
        < span > becomes rich becomes rich < I > Yeye Ye </ I > </ span > 
    </ div > 
</ div >

css styles

.cute-barrageAnd a display range is to determine the position, width is 100%, the height from the set, beyond the lateral part of the hidden
.barrage-div content portion, the content length is determined by determining the position of the stage relative to the parent

HTML, body { 
    width : 100% ; 
} 
.cute-Barrage { 
    width : 100% ; 
    height : 4rem ;   / * determine the length of the barrage * / 
    position : Absolute ; 
    Top : 1.5rem ;    / * determine the height of the barrage * / 
    left : 0 ; 
    overflow-X : hidden ;   / * laterally beyond the partially hidden * / 
    .barrage-div { 
        position : Absolute ;
        Top : 0 ; 
        right : -100% ;   / * ensure the beginning outside the screen, from right to left is the right, left to right is left * / 
        height : 0.6rem ; 
        background-Color : RGBA (255, 255, 255 , 0.9) ; 
        border-RADIUS : 2rem ; 
        White Space- : nowrap ;    / * ensure the display on one line, or be moved to the last wrap * / 
        IMG { 
            width : 0.5rem ; 
            height : 0.5rem ; 
            Vertical-align = left: Middle ;   // inline block element, center alignment 
            padding-left : 0.05rem ; 
            border-RADIUS : 50% ; 
        } 
        span { 
            font-size : 14px ; 
            padding : 0 0.1rem ; 
            Line-height : 0.6rem ;     // inline block element, centered four indispensable 
            height : 0.6rem ;       the // linking block element, centered four indispensable 
            the display : inline-block ; :        // inline block element, a missing four centered can not
            align = left-VerticalMiddle ;       // inline block element, centered four indispensable 
            I { 
                Color : # fe5453 ; 
                font-weight : 700 ; 
            } 
        } 
    } 
}

 

js dynamic animation to achieve (zepto.js)

// barrage 
var winWidth = $ (window) .width ();   // Get the screen width 
$ ( "Barrage-div.") Each (. Function (index, value) {    // iterate each barrage 
    var width = $ (value) .width ();    // get the current width of the barrage 
    var topRandom = Math.floor (Math.random () *. 3) + 'REM';   // Get a random number according 0,1,2 case of changing 
    $ (value) .css ({ "right": - width, "Top": topRandom});   // move barrage screen to the outside, just beyond the position 
    // spelling function animation frame, each ani remember to distinguish, the width of their movement from a distance minus the width of the entire screen     
    var keyframes = `\     
        @keyframes ANI index {} {$    
            form { 
                right: $ { -PX} width; 
            } 
            to { 
                right: $ {} winWidth PX; 
            } 
        } \     
        @ -webkit- keyframes ANI index {} {$ 
            form { 
                right: $ { - width PX}; 
            } 
            to { 
                right: $ {} PX winWidth ; 
            } 
        } `;       
    // add to the inside of the head tag page 
    $ (" <style> ") attr (" type "," text / CSS ") HTML (keyframes) .appendTo ($ (" head. ". )) ;      
     // define animation speed listing 
    var aniList = [3,5,7,9,11 ];
     // get the random number array, 0,1,2,3,4 
    var= Math.floor aniTime (Math.random () *. 5 );
     // to add the current animation full barrage of CSS 
    // delay each time with 1.5 *, the variable 
    $ (value) .css ( { "animation": `ani $ {index} $ {aniList [aniTime]} s linear $ {index * 1.5} s`," - webkit-animation ":` ani $ {index} $ {aniList [aniTime]} s index * for 1.5 $ {Linear }} s`); 
})

Done it -