随机关键帧定位每次迭代以创建下降的“矩阵代码"

问题描述

我正在尝试在许多独立的 DIV 上制作一个带有动画 CSS 类的 HTML 网页，这些类移动到它们自己随机生成的位置.我有 20 个元素，随机生成的字符从页面顶部落下并随着它们沿 y 轴移动而消散(如矩阵代码).

I'm attempting to make an HTML web page with animated CSS classes on many independent DIVs moving to their own randomly generated positions. I have 20 elements with randomly generated characters falling from the top of the page and dissipating as they move along their y-axis (like the Matrix code).

JsFiddle Demo 记住范围是宽，所以有时字符组生成在右边很远的地方(在小视窗之外)

JsFiddle Demo Remember the range is wide, so sometimes the group of characters generate far off to the right (outside the small viewing window)

在顶级 JavaScript 中生成随机字符

Generating random char in top JavaScript

<script type="text/javascript">
    $(document).ready(function() {

    });

    function generateChar()
    {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789«‘¥~‹÷´`≠¡ˆ()][¶#@…•–!£$%&/?^*駰ç_:è+òàù,.-";
        text = possible.charAt(Math.floor(Math.random() * possible.length));
        return text;
    }

</script>

20 个 div 的 HTML

HTML of 20 divs

<div id="m1 " class="timeSpan movement"></div>
...
<div id="m20" class="timeSpan movement"></div>

JavaScript:这里我随机生成了字符(成功)但只有 1 个随机位置.所有元素都从相同的位置开始，而不是从它们自己的位置开始.

JavaScript: Here I've randomly generated characters (successfully) but only 1 random position. All the elements start in the same position instead of starting from their own spots.

<script type="text/javascript">

    document.getElementById("m1 ").innerHTML = generateChar();
    ...
    document.getElementById("m20").innerHTML = generateChar();


    var divs = document.getElementsByTagName("div");

    for(var i = 0; i < divs.length; i++){

        var xRandom = Math.round(Math.random() * 2000);
        var yBegRan = Math.round(Math.random() * 150);
        var yEndRan = Math.round(Math.random() * (2000 - 650) + 650);
        var secRan  = Math.round(Math.random() * (20));

        var style = document.documentElement.appendChild(document.createElement("style")),
        rule = " moveMinus {\
            0%   {\
                opacity: 1;\
            }\
            100%   {\
                opacity: 0; \
            }\
            from {\
                top: " + yBegRan + "px; left: " + xRandom + "px;\
            }\
            to {\
                top: " + yEndRan + "px; left: " + xRandom + "px;\
            }\
        }";

        if (CSSRule.KEYFRAMES_RULE) {
            style.sheet.insertRule("@keyframes" + rule, 0);
        } else if (CSSRule.WEBKIT_KEYFRAMES_RULE) {
            style.sheet.insertRule("@-webkit-keyframes" + rule, 0);
        }

        divs[i].innerHTML = makeid();
    }
</script>

CSS

.body-m{
  background-color: black;
  overflow: hidden;
}

.movement{
  position: absolute;
  font-size: 20px;
  color: limegreen;
  background-color: transparent;
  overflow: hidden;
}

@keyframes moveMinus {
  from { top: 0px; left: 21px; }
  to   { top: 600px; left: 21px; }
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

.timeSpan{
  animation: moveMinus 7s infinite;
}

如何正确迭代 DIV 的样式?

How do I properly iterate through the DIVs' styles?

推荐答案

我刚做了这个小提琴，Fiddle，我不确定这是否是您想要的，但我得到了一个您可以轻松编辑的结果 =)

Hi I just made this fiddle, Fiddle, I'm not sure that's what you wanted but I get a result that you can easily edit =)

这里是主要功能:

function setDiv(_div){
        var xRandom = Math.round(Math.random() * 2000);
        var yBegRan = Math.round(Math.random() * 600);
        var yEndRan = Math.round(Math.random() * (2000 - 650) + 650);
        var secRan  = Math.round(Math.random() * (20)) + 10;

        _div.style.opacity = 1;
        _div.style.top = yBegRan +"px";
        _div.style.animationDuration = secRan +"s";
        _div.style.left = xRandom + "px";
        _div.innerHTML = generateChar();
    }

这篇关于随机关键帧定位每次迭代以创建下降的“矩阵代码"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！