javascript - 使用wordpress滚动时的SVG动画

Question

我的wordpress网站中有一些用CSS制作的SVG动画，我希望它们仅在我向下滚动相对原始时才开始。
可能吗？

这是页面：www.lauradepaolis.com/about/

这是第一个SVG的html代码：

.cls-2 {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 8s ease-in-out infinite;
  direction: alternate;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 764 700">
      <defs>
        <style>
          .cls-1{fill:#e6e6e6;}.cls-2{fill:none;stroke:#e6e6e6;stroke-miterlimit:10;stroke-width:4px;}
        </style>
      </defs>
      <title>
        Senza titolo-1
      </title>
      <g id="Livello_1" data-name="Livello 1">
        <circle class="cls-1" cx="443" cy="404" r="55"/>
        <circle class="cls-1" cx="142" cy="129" r="33"/>
        <circle class="cls-1" cx="614" cy="675" r="25"/>
        <circle class="cls-1" cx="672" cy="336" r="25"/>
        <circle class="cls-1" cx="347" cy="168" r="25"/>
        <circle class="cls-1" cx="25" cy="349" r="25"/>
        <circle class="cls-1" cx="190" cy="628" r="25"/>
        <circle class="cls-1" cx="746" cy="152" r="18"/>
        <circle class="cls-1" cx="746" cy="530" r="18"/>
        <circle class="cls-1" cx="413" cy="18" r="18"/>
        <circle class="cls-1" cx="190" cy="469" r="18"/>
        <circle class="cls-1" cx="538" cy="168" r="39"/>
        <circle class="cls-1" cx="419" cy="603" r="39"/>
      </g>
      <g id="Livello_2" data-name="Livello 2">
        <line class="cls-2" x1="442.5" y1="403.5" x2="141.5" y2="128.5"/>
        <line class="cls-2" x1="346.5" y1="167.5" x2="442.5" y2="403.5"/>
        <line class="cls-2" x1="412.5" y1="17.5" x2="442.5" y2="403.5"/>
        <line class="cls-2" x1="537.5" y1="167.5" x2="442.5" y2="403.5"/>
        <line class="cls-2" x1="671.5" y1="335.5" x2="442.5" y2="403.5"/>
        <line class="cls-2" x1="745.5" y1="529.5" x2="442.5" y2="403.5"/>
        <line class="cls-2" x1="613.5" y1="674.5" x2="442.5" y2="403.5"/>
        <line class="cls-2" x1="418.5" y1="602.5" x2="442.5" y2="403.5"/>
        <line class="cls-2" x1="189.5" y1="627.5" x2="442.5" y2="403.5"/>
        <line class="cls-2" x1="189.5" y1="468.5" x2="442.5" y2="403.5"/>
        <line class="cls-2" x1="24.5" y1="348.5" x2="442.5" y2="403.5"/>
        <line class="cls-2" x1="745.5" y1="151.5" x2="442.5" y2="403.5"/>
      </g>

Answer 1

我通过添加可见的jquery动画类来做到这一点。
我希望这能帮到您

jQuery(document).ready(function($){
 $(window).on('scroll', function(){
  if ($("#Livello_2").is(':visible')){
    $("#Livello_2").addClass("cls-2");
  }
 });
});