Вы можете с этим помочь? Я думал делать сделать запуск вот так, но не получается
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
body {
height: 2000px;
}
.anim-1 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 2.5s linear alternate forwards;
}
@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
90% {
fill-opacity: 0;
}
100% {
stroke-dashoffset: 0;
fill-opacity: 1;
}
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var show = true;
var countbox = "#my-block";
$(window).on("scroll load resize", function() {
if (!show) return false; // Отменяем показ анимации, если она уже была выполнена
var w_top = $(window).scrollTop(); // Количество пикселей на которое была прокручена страница
var e_top = $(countbox).offset().top; // Расстояние от блока со счетчиками до верха всего документа
var w_height = $(window).height(); // Высота окна браузера
var d_height = $(document).height(); // Высота всего документа
var e_height = $(countbox).outerHeight(); // Полная высота блока со счетчиками
if (w_top + 200 >= e_top || w_height + w_top == d_height || e_height + e_top < w_height) {
function goSVG() {
var buff = document.getElementById('svgBlock');
buff.innerHTML = buff.innerHTML;
}
show = false;
}
});
});
</script>
</head>
<body>
<div style="height:1000px;"></div>
<div id="my-block">
<div id="svgBlock">
<svg width="450px" height="160px">
<text id="svgText" class="anim-1" x="0" y="158px" font-size="200px" stroke="#222121" stroke-width="1" fill-opacity="0">WEB</text>
</svg>
</div>
</div>
</body>
</html>