我需要创建一个传送带动画，当您向下滚动页面时，该动画会沿一个方向移动传送带上的项目，如果再次向上滚动，则执行相反的操作。我发现这个示例或多或少是我所需要的，除了需要自动滚动之外，它并不需要自动移动。
http://codepen.io/rezen/pen/vEgqs
有谁知道该如何修改才能实现这一目标？
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewport-fill="#00A8A4" width="1200px" height="600px">
<defs>
<g id="file">
<path fill="#FFFFFF" opacity=".2" d="M-11.605-11.518c-1.043,0-1.889,0.846-1.889,1.888v147.313c0,1.042,0.845,1.888,1.889,1.888H93.932
c1.044,0,1.89-0.846,1.89-1.888V13.191L71.111-11.518H-11.605z"/>
<line opacity="0.3" fill="none" stroke="#00504B" stroke-width="5.9066" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="-13.494" y1="137.748" x2="95.822" y2="137.748"/>
<line fill="none" stroke="#27BBB1" stroke-width="7.8755" stroke-miterlimit="10" x1="-13.494" y1="-9.63" x2="62.041" y2="-9.63"/>
<line opacity="0.3" fill="none" stroke="#00504B" stroke-width="5.9066" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="65.436" y1="24.866" x2="96.238" y2="24.866"/>
<path fill="#27BBB1" stroke="#006B64" stroke-width="5.9066" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M96.527,20.167H63.929c-1.043,0-1.889-0.846-1.889-1.89v-29.795"/>
<path fill="#004C47" d="M71.111-11.518l24.711,24.709v124.491c0,1.042-0.846,1.888-1.89,1.888H-11.605
c-1.043,0-1.889-0.846-1.889-1.888V-9.63c0-1.042,0.845-1.888,1.889-1.888H71.111 M71.111-17.424h-82.716
c-4.298,0-7.795,3.497-7.795,7.794v147.313c0,4.298,3.497,7.794,7.795,7.794H93.932c4.299,0,7.796-3.497,7.796-7.794V13.191
c0-1.566-0.622-3.069-1.729-4.177L75.288-15.694C74.179-16.802,72.677-17.424,71.111-17.424L71.111-17.424z"/>
</g>
<g id="wheel-form">
<path fill="#004C47" d="M28.396,5.907c12.237,0,22.316,9.96,22.466,22.203c0.074,6.003-2.194,11.677-6.388,15.975
c-4.193,4.298-9.808,6.705-15.811,6.779l-0.285,0.002c-12.239,0-22.32-9.96-22.471-22.201
C5.756,16.269,15.716,6.062,28.11,5.909l0.285-0.002H28.396 M28.395,0c-0.119,0-0.239,0.001-0.357,0.002
C12.36,0.196-0.19,13.061,0.002,28.736c0.192,15.556,12.862,28.036,28.377,28.036c0.119,0,0.239-0.001,0.357-0.002
c15.674-0.192,28.226-13.058,28.032-28.732C56.577,12.479,43.907-0.001,28.395,0L28.395,0z"/>
<circle fill="none" stroke="#003D38" stroke-width="11.8133" stroke-miterlimit="10" cx="28.385" cy="28.384" r="9.91"/>
<path opacity="0.47" fill="none" stroke="#00A79D" stroke-width="3.3441" stroke-linecap="round" stroke-miterlimit="10" d="
M39.432,28.353c0,6.101-4.947,11.047-11.046,11.047s-11.047-4.946-11.047-11.047"/>
</g>
<g id="spokes">
<line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="9.305" y1="28.621" x2="17.521" y2="28.52"/>
<line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="39.315" y1="28.25" x2="47.529" y2="28.15"/>
<line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="28.174" y1="8.628" x2="28.279" y2="17.122"/>
<line fill="none" stroke="#00A8A4" stroke-width="3.3439" stroke-linecap="round" stroke-miterlimit="10" x1="28.557" y1="39.649" x2="28.662" y2="48.142"/>
<animateTransform attributeName="transform" type="rotate" from="0, 28.5,28.5" to="360 , 28.5,28.5" dur="2s" repeatCount="indefinite"/>
</g>
<path id="conveyer" transform="translate(18, 18)" fill="none" stroke="#002A25" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M893.69,28.622c0,20.935-16.972,37.907-37.908,37.907H29.105c-20.935,0-37.907-16.973-37.907-37.907l0,0
c0-20.937,16.972-37.908,37.907-37.908h826.677C876.719-9.287,893.69,7.685,893.69,28.622L893.69,28.622z">
</path>
</defs>
<g id="conveyer-files" transform="translate(70, 46)">
<g>
<use xlink:href="#file"></use>
<text x="0" y="124" style="font-family:Arial;font-weight:bold;font-size:25px;fill:#004C47">
HTML
</text>
</g>
<g transform="translate(140, 0)">
<use xlink:href="#file"></use>
<text x="0" y="124" style="font-family:Arial;font-weight:bold;font-size:25px;fill:#004C47">
CSS
</text>
</g>
<g transform="translate(280, 0)">
<use xlink:href="#file"></use>
<text x="0" y="124" style="font-family:Arial;font-weight:bold;font-size:25px;fill:#004C47">
JS
</text>
</g>
<animateTransform attributeName="transform" type="translate" from="70, 46" to="710, 46" dur="8s" repeatCount="indefinite"/>
</g>
<g id="conveyer-full" transform="translate(20, 200)">
<g transform="translate(20, 18)">
<use xlink:href="#wheel-form"/>
<use xlink:href="#spokes"/>
</g>
<g transform="translate(111.5 , 18)">
<use xlink:href="#wheel-form"/>
<use xlink:href="#spokes"/>
</g>
<g transform="translate(203 , 18)">
<use xlink:href="#wheel-form"/>
<use xlink:href="#spokes"/>
</g>
<g transform="translate(294.5 , 18)">
<use xlink:href="#wheel-form"/>
<use xlink:href="#spokes"/>
</g>
<g transform="translate(386, 18)">
<use xlink:href="#wheel-form"/>
<use xlink:href="#spokes"/>
</g>
<g transform="translate(477.5 , 18)">
<use xlink:href="#wheel-form"/>
<use xlink:href="#spokes"/>
</g>
<g transform="translate(569, 18)">
<use xlink:href="#wheel-form"/>
<use xlink:href="#spokes"/>
</g>
<g transform="translate(660.5 , 18)">
<use xlink:href="#wheel-form"/>
<use xlink:href="#spokes"/>
</g>
<g transform="translate(752 , 18)">
<use xlink:href="#wheel-form"/>
<use xlink:href="#spokes"/>
</g>
<g transform="translate(843.5, 18)">
<use xlink:href="#wheel-form"/>
<use xlink:href="#spokes"/>
</g>
<use xlink:href="#conveyer" stroke-width="7" />
<use xlink:href="#conveyer" stroke-width="10" stroke-dasharray="12,12" >
<animate attributeName="stroke-dashoffset" values="600;0" begin="0s" dur="8s" repeatCount="indefinite" />
</use>
</g>
是的，但是在您的情况下，您可能必须修改/适应原始传送带的SVG定义。我通常使用非常好的Javascript库以编程方式处理SVG图形：svgjs
在此处查看动画示例：http : //www.svgjs.com/clock/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句