使用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");
  }
 });
});