Javascript-форум - Запуск SVG отрисовки при скролле

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Запуск SVG отрисовки при скролле (https://javascript.ru/forum/dom-window/60794-zapusk-svg-otrisovki-pri-skrolle.html)

Запуск SVG отрисовки при скролле

Помоги пожалуйста, как запустить SVG отрисовку при скролле:

<svg width="450px" height="160px">
<text class="anim-1" x="0" y="158px" font-size="200px" stroke="#222121" stroke-width="1" fill-opacity="0">WEB</text>
</svg>
<svg width="300px" height="20px">
<line class="anim-2" fill-opacity="0" stroke="#000" stroke-width="1" x1="20" x2="300" y1="18" y2="18"/>
</svg>

и сss

.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;
}
}

.anim-2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash2 4.5s linear alternate forwards ;
}

@keyframes dash2 {
0% {
fill-opacity: 0;
}

50% {
fill-opacity: 0;
stroke-dashoffset: 1000;
}

100% {
stroke-dashoffset: 0;
fill-opacity: 1;
}
}

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        .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;
            }
       }

       .anim-2 {
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: dash2 4.5s linear alternate forwards ;
       }

      @keyframes dash2 {
         0% {
             fill-opacity: 0;   
         }

         50% {
            fill-opacity: 0;
            stroke-dashoffset: 1000;
         }

         100% {
            stroke-dashoffset: 0;
            fill-opacity: 1;
         }
      }  
    </style>
    <script type="text/javascript">
        function goSVG() {
           var buff = document.getElementById('svgBlock');
           buff.innerHTML = buff.innerHTML;
  
        }
    </script>
</head>
<body onscroll="goSVG();">
   <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>
      <svg width="300px" height="20px"> 
         <line class="anim-2" fill-opacity="0" stroke="#000" stroke-width="1" x1="20" x2="300" y1="18" y2="18"/>	
      </svg>
   </div>
</body>
</html>

Спасибо, а можете сделать что-бы анимация один раз запускалась, а то сейчас когда скроллиш, она постоянно запускается?

dima-kruglyak,
Что значит - постоянно? Если вы нажали на скроллбар и двигаете без остановки и не отпуская, то запускается один раз, а если остановились и снова начали двигаться - то это уже новый скролл, и, соответственно, запуск.

Вот смотрите, когда находишься в блоке с анимацией и просто колесиком мышки верх в низ на 1px, анимация постояно запускается.

<!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;
}
}

.anim-2 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash2 4.5s linear alternate forwards ;
}

@keyframes dash2 {
0% {
fill-opacity: 0;
}

50% {
fill-opacity: 0;
stroke-dashoffset: 1000;
}

100% {
stroke-dashoffset: 0;
fill-opacity: 1;
}
}
</style>
<script type="text/javascript">
function goSVG() {
var buff = document.getElementById('svgBlock');
buff.innerHTML = buff.innerHTML;

}
</script>
</head>
<body onscroll="goSVG();">
<div style="height:500px;"></div>

<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>
<svg width="300px" height="20px">
<line class="anim-2" fill-opacity="0" stroke="#000" stroke-width="1" x1="20" x2="300" y1="18" y2="18"/>
</svg>
</div>
</body>
</html>

dima-kruglyak,
Каждый щелчок колесиком - это отдельное событие скролл.
Точно так же отдельное событие скролл - это наведение указателя мыши на скроллбар, нажатие левой кнопки и движение до остановки или отпускания кнопки.

Можно это исправить, что бы запуск был только в когда пользователь находится в нужном блоке?

dima-kruglyak,
Кстати, о том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

Цитата:

Сообщение от dima-kruglyak (Сообщение 404400)

Можно это исправить, что бы запуск был только в когда пользователь находится в нужном блоке?

Можете почитать https://learn.javascript.ru/onscroll