Я пытаюсь создать поле прокрутки звездочек для создаваемого приложения.
У него большой спрайт, который прокручивается с помощью CSS Transform (свойства margin-left).
Кроме того, я генерирую больше звездных спрайтов, которые перемещаю с помощью CSS-анимации.Я динамически создаю новый стиль для них и назначаю этот стиль спрайту.(Динамический стиль очень похож - он анимирует оставленные поля с течением времени. Они должны контролироваться javascript, потому что расположение ключевых кадров и продолжительность анимации меняются при запуске программы.
Хотя звездное полев zIndex: -1000 (жестко запрограммирован в файл CSS), а динамически генерируемые звезды имеют индекс zIndex в диапазоне от -1 до -100, они сортируются за звездным полем.
Полный код включен Github , соответствующие биты приведены ниже:
Создайте звездное поле 'background':
/* Create a starfield background, and get it moving via a CSS Transform */
starfield = document.createElement("img");
starfield.style.zIndex = -1000;
starfield.style.position = "absolute";
starfield.style.clip = "rect(0px 478px 298px 0px)";
starfield.src = "media/images/starfield-actual.jpg";
Создайте динамическую звезду для перемещения по фону:
size = Math.floor((Math.random() * 99) + 1);
star.style.zIndex = size * -1;
star.style.marginLeft = "480px";
top = topPadding - 50 + Math.random() * 300;
star.style.marginTop = top + "px";
document.styleSheets[cssIndex].insertRule("@-webkit-keyframes star_" + star.id + "_Keyframes {\n" + animationFrames + "\n}", 0, star.id);
document.styleSheets[cssIndex].insertRule(".star_" + star.id + "{\n -webkit-animation-name: star_" + star.id + "_Keyframes;\n" + " -webkit-animation-duration: 1s;\n}", 0, star.id);
star.className = star.className + " star_" + star.id;
Любые мысли с благодарностью - в том числе "Боже мой, почему ты так делаешь".:)