javascript - HTML randomize inline text block space and color -
currently have texts flying on background video. text color , space in between 2 text blocks fixed. want achieve randomize both color , space each text block in run time. believe can achieved using javascript i'm not sure how. here current html , css code
<!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 hacked!!!!!</span> <span> </span> <span>this 4th dimension hahaha</span> <span> </span> <span>let's use 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 move */ @keyframes marquee { 0% { text-indent: 100em } 100% { text-indent: -100em } } should in javascript along line of this?
var comments = document.getelementsbytagname("span"); (var = 0; < comments.length; i++) { comments[i].setattribute("color", getrandomcolor()) } but somehow doesn't work.
to change color use
for (var = 0; < comments.length; i++) { comments[i].style.color = getrandomcolor(); }edit: randomize space use
span.style.paddingright = getrandomspace() + "px"; edit2: @dandavis pointed out in comment above, "instead of random colors, lot nicer pre-bake 5-10 pairs of readable colors , randomly choose pairs"
Comments
Post a Comment