javascript - 使 SVG 图形在进入窗口时播放(滚动)-6ren

javascript - 使 SVG 图形在进入窗口时播放(滚动)

转载作者：行者123 更新时间：2023-12-03 07:08:01

我有一个棘手的问题!我的一些页面上有几个 SVG 图形，它们在页面加载时播放。但是因为他们中的许多人都在首屏之下，所以我希望他们在滚动到 View 中时开始播放(并播放一次)。

注意:我到处寻找解决方案，甚至聘请了一位无法使其工作的自由职业者。我认为我的 SVG 的不同之处在于它们使用 @keyframe 并且有不止一个按顺序播放的路径，这可能是其他解决方案不起作用的原因？路径不止一个的原因是它是一个书法箭头形状，当 SVG 蒙版显示时会重叠。

我的 SVG 之一的 HTML(在 DIV 中以使其响应):

<div id="arrow-1id" class="arrow-1 leftarrows">
  <!--START ARROW 1-->
  <svg id="arrow1svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436.55 256.959">
                        
                        <mask id="arrow1-mask1" maskUnits="userSpaceOnUse">
                        <path d="M4.537,54.288
                            c96.333-80.667,213.667,135.333,90.667,96.333"/>
                        </mask>
                        
                        <mask id="arrow1-mask2" maskUnits="userSpaceOnUse">
                        <path d="M100.87,156.955
                            c-29.667-100.667,29.666-152,78.333-146.667s151.667,255.667,29.667,234"/>
                        </mask>
                        
                        <mask id="arrow1-mask3" maskUnits="userSpaceOnUse">
                        <path d="M214.87,248.956
                            c-53.667-43.667,15.334-337.334,195.667-169.667"/>
                        </mask>
                        
                        <mask id="arrow1-mask4" maskUnits="userSpaceOnUse">
                        <path d="M322.203,53.955c108.667,43,117,69.09,68-53.955"/>
                        </mask>
                        
                            <path mask="url(#arrow1-mask1)" fill="#42A8FC" d="M98.168,50.639C66.146,29.84,27.535,21.405,0.142,44.781c-1.983,1.692,17.501,16.275,21.915,12.509
                            c21.17-18.066,49.736-15.119,72.854-0.936c11.126,6.518,19.094,15.658,19.094,15.658c8.426,9.078,14.961,19.84,18.385,31.416
                            c4.701,15.891,0.705,30.535-10.91,41.153c-0.855,0.782-1.803,1.409-2.783,1.981c-0.01,0.004-6.326,4.56-16.162,2.465l-6.889,7.466
                            c9.913,8.681,22.827,13.119,36.498,7.999c43.123-16.156,23.759-65.003-14.488-98.967C117.654,65.526,108.286,57.122,98.168,50.639z"/>
                            
                            <path mask="url(#arrow1-mask2)" fill="#42A8FC" d="M231.959,50.614c-17.516-25.197-43.061-49.605-73.761-50.592c-20.618-0.664-34.757,13.81-44.931,27.774
                            c-5.189,7.124-10.349,14.789-15.1,22.843l-3.258,5.715C84.467,75.328,76.75,96.273,76.766,117.7
                            c0.01,13.138,7.45,28.785,18.879,38.794l6.889-7.466c-0.658-1.355-1.329-2.721-1.771-4.061
                            c-7.573-22.907,0.716-49.699,13.241-72.955l3.65-6.486c7.376-12.557,15.713-23.818,23.057-32.426
                            c8.87-10.398,23.658-23.112,40.648-19.129c14.01,3.285,24.33,19.391,31.584,30.21c3.548,5.288,7.105,11.241,10.578,17.655
                            l12.133,25.446c22.227,53.15,32.844,122.106-8.789,151.369c-3.873,2.722-8.496,4.636-12.935,6.029l-3.878,7.245
                            c25.657,15.113,52.242-6.228,60.439-31.938c14.138-44.338-1.676-101.902-24.266-145.678
                            C246.227,74.311,238.632,60.523,231.959,50.614z"/>
                            
                            <path mask="url(#arrow1-mask3)" fill="#42A8FC" d="M406.734,68.147c-17.148-17.841-37.951-33.412-59.953-44.124c-50.594-24.632-88.095-5.991-114.822,26.591
                            l-8.438,11.223c-3.395,4.914-6.599,10.027-9.592,15.281c-17.29,30.335-29.316,64.641-31.375,100.486
                            c-1.105,19.22-1.053,44.238,13.145,61.586c4.664,5.7,9.492,9.873,14.354,12.736l3.878-7.245c-3.323-4.796-5.046-11.189-6.378-16.149
                            c-5.317-19.783-3.871-40.435-0.658-59.469c4.553-26.978,14.076-56.253,28.76-81.78l9.521-14.934
                            c8.408-11.894,18.098-22.568,29.177-31.183c41.766-32.474,90.141-8.049,122.342,30.429
                            C404.036,81.622,413.766,75.922,406.734,68.147z"/>
                            
                            <path mask="url(#arrow1-mask4)" fill="#42A8FC" d="M404.413,71.956c0,0-3.166,0-12.344-3.026c-17.545-5.735-35.092-11.471-52.635-17.206
                            c-15.207-4.971-15.507,16.587-1.976,21.011c27.503,8.99,55.004,17.981,82.506,26.972c9.534,3.115,13.706-5.336,11.287-12.662
                            c-8.52-25.797-17.039-51.594-25.558-77.392c-4.546-13.767-25.338-10.047-20.597,4.315c5.671,17.17,11.341,34.342,17.013,51.514
                            L404.413,71.956z"/>
                        
                        </svg>

  <style>
    #arrow1-mask1 path {
      fill: none;
      stroke: white;
      stroke-width: 39;
      stroke-dasharray: 265.809 265.809;
      stroke-dashoffset: 0;
      animation: brush1a 2s linear;
      animation-fill-mode: forwards;
    }
    
    #arrow1-mask2 path {
      fill: none;
      stroke: white;
      stroke-width: 39;
      stroke-dasharray: 499.444 499.444;
      stroke-dashoffset: 0;
      animation: brush1b 2s linear;
      animation-fill-mode: forwards;
    }
    
    #arrow1-mask3 path {
      fill: none;
      stroke: white;
      stroke-width: 39;
      stroke-dasharray: 396.144 396.144;
      stroke-dashoffset: 0;
      animation: brush1c 2s linear;
      animation-fill-mode: forwards;
    }
    
    #arrow1-mask4 path {
      fill: none;
      stroke: white;
      stroke-width: 39;
      stroke-dasharray: 195.971 195.971;
      stroke-dashoffset: 0;
      animation: brush1d 2s linear;
      animation-fill-mode: forwards;
    }
    
    @keyframes brush1a {
      0% {
        stroke-dashoffset: 265.809;
      }
      1% {
        stroke-dashoffset: 265.809;
      }
      20% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }
    
    @keyframes brush1b {
      0% {
        stroke-dashoffset: 499.444;
      }
      20% {
        stroke-dashoffset: 499.444;
      }
      60% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }
    
    @keyframes brush1c {
      0% {
        stroke-dashoffset: 396.144;
      }
      60% {
        stroke-dashoffset: 396.144;
      }
      80% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }
    
    @keyframes brush1d {
      0% {
        stroke-dashoffset: 195.971;
      }
      80% {
        stroke-dashoffset: 195.971;
      }
      100% {
        stroke-dashoffset: 0;
      }
    }
  </style>
  <!--END ARROW 1-->
</div>

我没有发布任何 JS，因为我试过的代码都不起作用。

最佳答案

如果容器 #arrow-1id 作为特定类(比方说 .play)，您可以通过运行动画来实现这一点。然后，当容器出现在屏幕上时，您只需使用 javascript 进行检查。在这种情况下，只需将 .play 类添加到容器中即可:

var body = document.getElementsByTagName("body")[0];
var div = document.getElementById("arrow-1id");

body.onscroll = function() {
  if (document.documentElement.scrollTop >= div.offsetTop - 200) {
    div.classList.add("play");
  }
};

body {
  height: 2000px;
}

#arrow-1id {
  margin-top: 400px;
  background-color: lightgrey;
}

.play #arrow1-mask1 path {
  fill: none;
  stroke: white;
  stroke-width: 39;
  stroke-dasharray: 265.809 265.809;
  stroke-dashoffset: 0;
  animation: brush1a 2s linear;
  animation-fill-mode: forwards;
}

.play #arrow1-mask2 path {
  fill: none;
  stroke: white;
  stroke-width: 39;
  stroke-dasharray: 499.444 499.444;
  stroke-dashoffset: 0;
  animation: brush1b 2s linear;
  animation-fill-mode: forwards;
}

.play #arrow1-mask3 path {
  fill: none;
  stroke: white;
  stroke-width: 39;
  stroke-dasharray: 396.144 396.144;
  stroke-dashoffset: 0;
  animation: brush1c 2s linear;
  animation-fill-mode: forwards;
}

.play #arrow1-mask4 path {
  fill: none;
  stroke: white;
  stroke-width: 39;
  stroke-dasharray: 195.971 195.971;
  stroke-dashoffset: 0;
  animation: brush1d 2s linear;
  animation-fill-mode: forwards;
}

@keyframes brush1a {
  0% {
    stroke-dashoffset: 265.809;
  }
  1% {
    stroke-dashoffset: 265.809;
  }
  20% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes brush1b {
  0% {
    stroke-dashoffset: 499.444;
  }
  20% {
    stroke-dashoffset: 499.444;
  }
  60% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes brush1c {
  0% {
    stroke-dashoffset: 396.144;
  }
  60% {
    stroke-dashoffset: 396.144;
  }
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes brush1d {
  0% {
    stroke-dashoffset: 195.971;
  }
  80% {
    stroke-dashoffset: 195.971;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<div id="arrow-1id" class="arrow-1 leftarrows">
  <!--START ARROW 1-->
  <svg id="arrow1svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 436.55 256.959">

    <mask id="arrow1-mask1" maskUnits="userSpaceOnUse">
      <path d="M4.537,54.288
                            c96.333-80.667,213.667,135.333,90.667,96.333" />
    </mask>

    <mask id="arrow1-mask2" maskUnits="userSpaceOnUse">
      <path d="M100.87,156.955
                            c-29.667-100.667,29.666-152,78.333-146.667s151.667,255.667,29.667,234" />
    </mask>

    <mask id="arrow1-mask3" maskUnits="userSpaceOnUse">
      <path d="M214.87,248.956
                            c-53.667-43.667,15.334-337.334,195.667-169.667" />
    </mask>

    <mask id="arrow1-mask4" maskUnits="userSpaceOnUse">
      <path d="M322.203,53.955c108.667,43,117,69.09,68-53.955" />
    </mask>

    <path mask="url(#arrow1-mask1)" fill="#42A8FC" d="M98.168,50.639C66.146,29.84,27.535,21.405,0.142,44.781c-1.983,1.692,17.501,16.275,21.915,12.509
                            c21.17-18.066,49.736-15.119,72.854-0.936c11.126,6.518,19.094,15.658,19.094,15.658c8.426,9.078,14.961,19.84,18.385,31.416
                            c4.701,15.891,0.705,30.535-10.91,41.153c-0.855,0.782-1.803,1.409-2.783,1.981c-0.01,0.004-6.326,4.56-16.162,2.465l-6.889,7.466
                            c9.913,8.681,22.827,13.119,36.498,7.999c43.123-16.156,23.759-65.003-14.488-98.967C117.654,65.526,108.286,57.122,98.168,50.639z" />

    <path mask="url(#arrow1-mask2)" fill="#42A8FC" d="M231.959,50.614c-17.516-25.197-43.061-49.605-73.761-50.592c-20.618-0.664-34.757,13.81-44.931,27.774
                            c-5.189,7.124-10.349,14.789-15.1,22.843l-3.258,5.715C84.467,75.328,76.75,96.273,76.766,117.7
                            c0.01,13.138,7.45,28.785,18.879,38.794l6.889-7.466c-0.658-1.355-1.329-2.721-1.771-4.061
                            c-7.573-22.907,0.716-49.699,13.241-72.955l3.65-6.486c7.376-12.557,15.713-23.818,23.057-32.426
                            c8.87-10.398,23.658-23.112,40.648-19.129c14.01,3.285,24.33,19.391,31.584,30.21c3.548,5.288,7.105,11.241,10.578,17.655
                            l12.133,25.446c22.227,53.15,32.844,122.106-8.789,151.369c-3.873,2.722-8.496,4.636-12.935,6.029l-3.878,7.245
                            c25.657,15.113,52.242-6.228,60.439-31.938c14.138-44.338-1.676-101.902-24.266-145.678
                            C246.227,74.311,238.632,60.523,231.959,50.614z" />

    <path mask="url(#arrow1-mask3)" fill="#42A8FC" d="M406.734,68.147c-17.148-17.841-37.951-33.412-59.953-44.124c-50.594-24.632-88.095-5.991-114.822,26.591
                            l-8.438,11.223c-3.395,4.914-6.599,10.027-9.592,15.281c-17.29,30.335-29.316,64.641-31.375,100.486
                            c-1.105,19.22-1.053,44.238,13.145,61.586c4.664,5.7,9.492,9.873,14.354,12.736l3.878-7.245c-3.323-4.796-5.046-11.189-6.378-16.149
                            c-5.317-19.783-3.871-40.435-0.658-59.469c4.553-26.978,14.076-56.253,28.76-81.78l9.521-14.934
                            c8.408-11.894,18.098-22.568,29.177-31.183c41.766-32.474,90.141-8.049,122.342,30.429
                            C404.036,81.622,413.766,75.922,406.734,68.147z" />

    <path mask="url(#arrow1-mask4)" fill="#42A8FC" d="M404.413,71.956c0,0-3.166,0-12.344-3.026c-17.545-5.735-35.092-11.471-52.635-17.206
                            c-15.207-4.971-15.507,16.587-1.976,21.011c27.503,8.99,55.004,17.981,82.506,26.972c9.534,3.115,13.706-5.336,11.287-12.662
                            c-8.52-25.797-17.039-51.594-25.558-77.392c-4.546-13.767-25.338-10.047-20.597,4.315c5.671,17.17,11.341,34.342,17.013,51.514
                            L404.413,71.956z" />

  </svg>


  <!--END ARROW 1-->
</div>

关于javascript - 使 SVG 图形在进入窗口时播放(滚动)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64117120/

文章推荐： javascript - 如何更改 HTML 文件中的文本

文章推荐： javascript - Angularjs 需要在 ng-change 之前更新 ng-model

文章推荐： javascript - Highcharts/JavaScript 月份与 MySQL 不兼容

c++ - 为什么我可以 mov 进入 eax，进入 ax，但不能进入 al，甚至可能进入 ah？
如果我 mov, eax 12345 和之后的 mov var, eax (假设 var 是一个 32 位的 int 等..等等)并输出 var 稍后它会正确输出。与 ax 相同。 mov ax,
php - if 进入 for 时的奇怪行为
我有这个代码: for($nrt=0; $nrt"; if($sidesIndexes[$nrt]==$nrt) { echo "am I in??? ".$sidesInde
进入 channel 无限循环不阻塞
我正在阅读The Go Programming Language的8.5章，并陷入一些代码。下面的代码列表。 func main() { naturals := make(chan int)
MYSQL 进入 OUTFILE
我写了一个 MySQL 查询用于将数据导出到文本文件。查询运行成功，但结果与我的预期不符。我想在列之间没有间距的结果。 select sample_export_record1_2013.
excel - 进入 ThisWorkbook 代码区
在普通的 Excel 窗口中，我可以打开 VBE 并通过触摸键序列插入一个新模块:ALT+F11、ALTim 全部不使用鼠标。有没有办法打开 VBE 并导航到本工作手册不使用鼠标的代码区域？最佳
reactjs - Axios 进入 .then 未按预期工作
我正在使用 axios 发出 http 请求。在 .then() 内部，我正在使用另一个 axios 调用。最后，我有第三个 then()，它应该在第二个 then 之后运行，但实际上并没有这样做。
iphone - MPMoviePlayerController 进入 View
我需要在 cocos2d 项目中播放视频..我的问题是:如何将 MPMoviePlayerController 放入我的 View 中，如下所示:？ UIView *theView = [[CCDir
javascript - Angular 进入 Controller
我正在学习 Angular。以下代码有效: .controller('abc', function ($scope, $http) { $http.get("/Handlers/Authenticat
c# - ViewModel 进入 View
目前我正在使用 WPF 学习 C#。我的主要方法是尽我所能使用 MVVM 模式，但现在我有点困惑。在我所有 View 的应用程序中，我有一个 View 模型: private DruckviewVi
javascript - IF 进入 Google 脚本中关于提取电子邮件的循环
关于将 G 邮件提取到 Google 电子表格，我该如何添加 IF 以按主题驳回特定电子邮件？例如:电子邮件回复(主题中带有“RE:”)。我不希望这些电子邮件出现在我的电子表格中。我尝试过使用 LO
javascript - 进入 Spotify 阵列
我正在尝试使用 Spotify API 并进入数组。 const App = () => { const [isLoading, setIsLoading] = useState(true);
symfony - 如何使用条件 if 进入 assetic
我有一个 html 模板，并且有一个条件为 --> 的代码 --> window.jQuery || document.write(""+"");
java - 进入 UI 线程
我正在开发一个 Android 应用程序，该应用程序会暴力破解从 int 创建的 MD5 和。暴力破解部分工作正常。 (我可以sysout最终值并且它是正确的。) 我在将输出值发送到警报对话框时遇到
jquery - D3 进入/退出路径圆组
我正在创建一个界面，用户可以通过该界面生成多系列折线图，并控制绘制哪些数据集。要绘制哪些数据集由复选框控制。页面加载时，默认数据集以图表形式呈现，并且 $('input:checkbox.data-
javascript - 进入/退出未正确清理强制布局中弹出的节点/链接
我尝试将有向无环图绘制为力布局。但是我注意到，尽管为每个组元素灌输了进入/退出条件，弹出的节点/链接并没有从 DOM 中删除它们自己。相反，弹出的节点/链接在力布局中卡住；这意味着没有调用进入/退
c# - 调试问题 - 进入 - C#
这里是新手。我不知道它是怎么发生的，但我正在处理一个程序，当我去调试并进入时，黄色箭头走到了我代码的最后并跳过了整个 block 。有快速解决方法吗？最佳答案按 F11，或单击工具栏上的“Step
android - 进入 ListNavigation 单击操作栏中的
我的 Action 栏 sherlock 中有一个列表。我想在用户点击该列表时得到。我不想知道用户何时点击某个项目，我已经知道 (onNavigationItemSelected)。在我的 onCr
MySQL 日期 -> 进入 EuroDate
** 你好 **我如何从 ci 中的 mysql 日期获取 eurodate 来工作......无法弄清楚 - 请帮忙想要获取日期 YY-mm- dd -> dd-mm-yy提前致谢最佳答案 $t
bash - cd 进入 while 循环中的目录不起作用
我有以下脚本: #!/bin/bash ls -1 | while read d do [[ -f "$d" ]] && continue echo $d cd $d done
c# - 进入/退出方法时如何增加/减少缩进？
TL;DR - 跳转到最后一段背景我正在执行一些数据驱动测试，并将日志文件用作测试输出之一。它的工作原理是这样的- 读取文件夹中的第一个文件处理第一行并转换为测试运行测试执行验证 1 ...

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使 SVG 图形在进入窗口时播放(滚动)