HTML - вывод текста в виде волн. : Программирование

█ 13.12.2016 12:53

Попросили тут помочь одному студенту - вывести текст в виде волны.

Пример html тоже был.

Код:

<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
<style> 
body { background-color : LightPink; } 
#wavetext { 
 text-align : center; 
} 
#wavetext div { 
 display: inline-block; 
 font-family : "Fredoka One", sans-serif; 
 font-size : 40px; 
 float:left; 
} 
</style> 
</head> 
<body onLoad="begin();"> 
<div id="wavetext" > </div> 
<script language="javascript"> 
var text = "AveCaesarMorituriTeSalutantAveCaesarMorituriTeSalutant";
function begin() { 
 var wav = document.getElementById("wavetext"); 
 var newElement; 
 for(var i in text) { 
  newElement = document.createElement("DIV"); 
  newElement.appendChild(document.createTextNode( text[i] ) ); 
  newElement.style.marginTop = 200-(Math.sin(i/4)*Math.cos(i/5)) * 150 + "px"; 
  wav.appendChild(newElement); 
 } 
} 
</script> 
</body> 
</html>

Понятно - меняем функцию синуса на косинус - получаем другую волну, но была еще задача - вывести одновременно две волны, наложенные одна на другую.
И что то как ни старался - не получается.

█ 13.12.2016 13:00

CSS
z-index
position:absolute

█ 13.12.2016 16:17

Может кому пригодится в будущем - итоговый вариант:

Код:

<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
<style> 
 
@import url(http://fonts.googleapis.com/css?family=Fredoka+One); 
 
body { background-color : LightPink; } 
 
#wavetext div { 
display: block; 
font-family : "Fredoka One", sans-serif; 
font-size : 25px; 
float:left; 
position: relative;
} 

#wavetext2 div { 
display: block; 
font-family : "Fredoka One", sans-serif; 
font-size : 25px; 
float:left;
position: relative;
top: 0px; /* Сдвигаем текст вверх */
left: -740px; /* Сдвигаем текст вправо */ 
} 

 #wavetext { z-index: 2; }
 #wavetext2 { z-index: 1; }
</style> 
</head> 
 
<body onLoad="begin();begin2();"> 
 
<div id="wavetext" > </div> 
<div id="wavetext2" > </div>  
 
<script language="javascript"> 
var text = "AveCaesarMorituriTeSalutantAveCaesarMorituriTeSalutant";
var text2 ="AdimpossibilianemoteneturAdimpossibilianemoteneturAveCa";
function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
} 
function begin() { 
 var wav = document.getElementById("wavetext"); 
 var newElement; 
 for(var i in text) { 
  newElement = document.createElement("DIV"); 
   
   newElement.appendChild(document.createTextNode( text[i] ) ); 
 
  newElement.style.marginTop = 200-(Math.sin(i/4)) * 150 + "px"; 
  newElement.style.color=get_random_color(); 
  wav.appendChild(newElement); 
 }
} 
function begin2() { 
 var wav = document.getElementById("wavetext2"); 
 var newElement; 
 for(var i in text2) { 
  newElement = document.createElement("DIV"); 
   
   newElement.appendChild(document.createTextNode( text2[i] ) ); 
 
  newElement.style.marginTop = 200-(Math.cos(i/4)) * 50 + "px"; 
  newElement.style.color=get_random_color(); 
  wav.appendChild(newElement); 
 } 
} 
</script> 
</body> 
</html>