javascript - 怎么让一个DIV从屏幕的外侧穿过（弹幕效果）？

Question

代码可以实现弹幕的效果

但是弹幕出场的方式有点奇葩 聚成一团然后才慢慢舒展 有什么方法让弹幕的p从屏幕外穿过？

谢谢

        var _top = 0;
        $('body').html('<p id="dm">这就是一条弹幕这就是一条弹幕这就是一条弹幕这就是一条弹幕</p>');
        var dm = $('#dm');

        var _left = $(window).width();
        var _height = $(window).height();

        _top = _top + 76;
        if(_top >= _height - 100){
            _top = 0;
        }

        dm.css({left:_left, top:_top, color:getReandomColor()});
        var time=10000;
        if(dm.index() % 2 == 0){
            time=15000;
        }
        dm.animate({left: "-"+_left+"px"}, time);


        function getReandomColor(){
            return '#'+(
                function(h)
                    {
                        return new Array(7-h.length).join("0") + h
                    }
              )((Math.random()*0x1000000<<0).toString(16))
        }

Answer 1

data={name:this.name,message:this.message,time:nowtime,uid:uid,top:Math.round(Math.random()*100)};

也想过做弹幕的，直接用的是marquee 仅供参考，传值的时候传个随机参数让他们的位置不一样
https://github.com/Someant/chatandbarrage/blob/master/barrage.html

Answer 2

吧所有弹幕放在一个p里面，根据发布时间和次序，使用position定位；p整体translateX，时间参照视频剩余时间；新提交弹幕同理根据视频播放剩余布置位置即可；

单独制作弹幕，每条动画；伤不起！！！（单条动画做过个项目，惨不忍睹；）

Answer 3

用css3中的animation和transform属性可以实现此效果
demo：demo

Answer 4

慎用left和margin-left写动画的CSS效果，很影响性能，建议用transform：translateX()