В настоящее время у меня есть тексты, пролетели над фоновым видео. Исправлен цвет текста и пространство между двумя текстовыми блоками. То, что я хочу достичь, - рандомизировать как цвет, так и пространство для каждого текстового блока во время выполнения. Я считаю, что это может быть достигнуто с помощью javascript, но я точно не знаю, как это сделать. Вот мой текущий HTML и CSS кодHTML рандомизируйте встроенное текстовое пространство и цвет текста
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" href="StyleSheet.css"/>
</head>
<body>
<iframe width="100%" height="315" src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1"></iframe>
<div class="marquee">
<span>yay 1st comment</span>
<span> </span>
<span>lol</span>
<span> </span>
<span>hacking !!???</span>
<span> </span>
<span>this video is hacked!!!!!</span>
<span> </span>
<span>this is THE 4th dimension hahaha</span>
<span> </span>
<span>Let's use this feature more wisely now</span>
<span> </span>
<span>Okay</span>
<span> </span>
</div>
</body>
</html>
StyleSheet
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
}
.marquee {
color: white;
position: absolute;
margin-top: 20px;
top: 0;
animation: marquee 20s linear infinite;
z-index: 1;
display: inline-block;
}
span:before{
content:" ";
display:inline-block;
width:32px;
}
/* Make it move */
@keyframes marquee {
0% { text-indent: 100em }
100% { text-indent: -100em }
}
Должен ли я сделать что-то в JavaScript вдоль линии это?
var comments = document.getElementsByTagName("span");
for (var i = 0; i < comments.length; i++) {
comments[i].setAttribute("color", getRandomColor())
}
Но почему-то это не работает.
вместо случайных цветов, это выглядело бы намного приятнее, чтобы предварительно испечь 5-10 пар хорошо читаемых цветов и случайным образом выбирать из пар ... – dandavis
это имеет смысл! – TheInvisibleFist