|
Сообщение от BSI
|
|
Предполагаю, что в стилях надо скрыть объект текста, а скрипте прописать его появление. Вот это появление я не знаю как сделать.
|
строки 39, 41, 83
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Привет</title>
<style type="text/css">
html, body {
background: url(1.jpg) no-repeat center center fixed;
}
#test {
width: 30vw;
height: 23vw;
position: relative;;
left: -18em;
bottom: -3em;
right: 0;
margin: auto;
text-align: center;
font-size: 20px;
font-family: garamond serif;
font-weight: bold;
font-style: italic;
color: red;
font: 600 30px/1.3 'Syncopate', sans-serif;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0, .10),
0 0 5px rgba(0,0,0, .10),
0 1px 3px rgba(0,0,0, .30),
0 3px 5px rgba(0,0,0, .20),
0 5px 10px rgba(0,0,0, .25),
0 10px 10px rgba(0,0,0, .20),
0 20px 20px rgba(0,0,0, .15);
text-transform: uppercase;
font-size: 1.2vw;
opacity: 0;
}
#test.show {
opacity: 1;
}
</style>
</head>
<body>
<div id="test" >
Белеет парус одинокий<br>
В тумане моря голубом!..<br>
Что ищет он в стране далекой?<br>
Что кинул он в краю родном?...<br><br>
Играют волны — ветер свищет,<br>
И мачта гнется и скрипит...<br>
Увы! Он счастия не ищет<br>
И не от счастия бежит!
</center></div>
<script>
function pechat() {
var textNodes =[];
var textNodes_data =[];
var i = 0;
function search_textNodes(b) {
b = b.childNodes;
for (var c = 0, d = b.length; c < d; c++) {
var a = b[c];
if (a.nodeType == 3) {
textNodes.push(a);
textNodes_data.push(a.data);
a.data = ""
} else a.hasChildNodes() && search_textNodes(a)
}
};
var d = document.getElementById('test');
search_textNodes(d);
function str_write() {
var a = textNodes_data[i];
if (a) {
textNodes[i].data += a.charAt(0);
textNodes_data[i] = a.substr(1)
} else i++;
i < textNodes.length && setTimeout(str_write, 60)
};
d.classList.add('show');
str_write()
}
setTimeout(pechat, 2000);
</script>
</body>
</html>
