Показать сообщение отдельно
  #2 (permalink)  
Старый 06.12.2023, 10:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Сообщение от 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>
Ответить с цитированием