Я пытаюсь создать анимацию, используя имеющийся у меня объект SVG, в результате чего каждый отдельный прямоугольник SVG в одной строке анимируется с помощью прокрутки вверх или вниз. Я изо всех сил пытаюсь найти и ресурсы, чтобы узнать, как сделать это, и лучший способ фактически реализовать эту функциональность.

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

Код у меня так далеко:

{amp}lt;div class="hero--wrapper"{amp}gt; {amp}lt;div class="hero--inner"{amp}gt; {amp}lt;div class="page--center"{amp}gt; {amp}lt;div class="svg-rect--el"{amp}gt; {amp}lt;svg xmlns="http://www.w3.org/2000/svg" width="688.571" height="1226.457" viewBox="0 0 688.571 1226.457" preserveAspectRatio="none"{amp}gt; {amp}lt;defs{amp}gt; {amp}lt;style{amp}gt; .cls-1 { fill: #38324d; } .cls-2 { fill: #42cc7f; } .cls-3 { fill: #937ce3; } {amp}lt;/style{amp}gt; {amp}lt;/defs{amp}gt; {amp}lt;g id="Group_1" data-name="Group 1" transform="translate(-1009.907 83.176)"{amp}gt; {amp}lt;rect id="Rectangle_16" data-name="Rectangle 16" class="cls-1" width="89" height="32" rx="4" transform="translate(1233.124 669.715) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_22" data-name="Rectangle 22" class="cls-1" width="89" height="32" rx="4" transform="translate(1256.124 728.715) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_35" data-name="Rectangle 35" class="cls-1" width="89" height="32" rx="4" transform="translate(1317.124 707.715) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_8" data-name="Rectangle 8" class="cls-2" width="89" height="32" rx="4" transform="translate(1412.715 302.144) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_26" data-name="Rectangle 26" class="cls-2" width="89" height="32" rx="4" transform="translate(1435.715 361.144) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_39" data-name="Rectangle 39" class="cls-1" width="89" height="32" rx="4" transform="translate(1496.715 340.144) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_10" data-name="Rectangle 10" class="cls-1" width="89" height="32" rx="4" transform="translate(1054.522 1037.148) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_19" data-name="Rectangle 19" class="cls-1" width="89" height="32" rx="4" transform="translate(1077.522 1096.148) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_32" data-name="Rectangle 32" class="cls-2" width="89" height="32" rx="4" transform="translate(1138.522 1075.148) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_4" data-name="Rectangle 4" class="cls-3" width="89" height="32" rx="4" transform="translate(1502.086 118.923) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_28" data-name="Rectangle 28" class="cls-3" width="89" height="32" rx="4" transform="translate(1525.086 177.923) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_41" data-name="Rectangle 41" class="cls-3" width="89" height="32" rx="4" transform="translate(1586.086 156.923) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_14" data-name="Rectangle 14" class="cls-3" width="89" height="32" rx="4" transform="translate(1143.893 853.927) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_17" data-name="Rectangle 17" class="cls-3" width="89" height="32" rx="4" transform="translate(1166.893 912.927) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_30" data-name="Rectangle 30" class="cls-3" width="89" height="32" rx="4" transform="translate(1227.893 891.927) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_5" data-name="Rectangle 5" class="cls-1" width="89" height="32" rx="4" transform="translate(1323.484 486.355) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_24" data-name="Rectangle 24" class="cls-1" width="89" height="32" rx="4" transform="translate(1346.484 545.355) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_37" data-name="Rectangle 37" class="cls-3" width="89" height="32" rx="4" transform="translate(1407.484 524.355) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_2" data-name="Rectangle 2" class="cls-2" width="89" height="32" rx="4" transform="translate(1546.701 26.817) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_29" data-name="Rectangle 29" class="cls-1" width="89" height="32" rx="4" transform="translate(1569.701 85.817) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_43" data-name="Rectangle 43" class="cls-2" width="89" height="32" rx="4" transform="translate(1614.701 -3.183) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_42" data-name="Rectangle 42" class="cls-3" width="89" height="32" rx="4" transform="translate(1630.701 64.817) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_15" data-name="Rectangle 15" class="cls-2" width="89" height="32" rx="4" transform="translate(1188.508 761.821) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_20" data-name="Rectangle 20" class="cls-1" width="89" height="32" rx="4" transform="translate(1211.508 820.821) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_33" data-name="Rectangle 33" class="cls-2" width="89" height="32" rx="4" transform="translate(1272.508 799.821) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_6" data-name="Rectangle 6" class="cls-3" width="89" height="32" rx="4" transform="translate(1368.1 394.249) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_25" data-name="Rectangle 25" class="cls-3" width="89" height="32" rx="4" transform="translate(1391.1 453.249) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_38" data-name="Rectangle 38" class="cls-3" width="89" height="32" rx="4" transform="translate(1452.1 432.249) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_3" data-name="Rectangle 3" class="cls-1" width="89" height="32" rx="4" transform="translate(1457.47 211.028) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_27" data-name="Rectangle 27" class="cls-3" width="89" height="32" rx="4" transform="translate(1480.47 270.028) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_40" data-name="Rectangle 40" class="cls-2" width="89" height="32" rx="4" transform="translate(1541.47 249.028) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_12" data-name="Rectangle 12" class="cls-2" width="89" height="32" rx="4" transform="translate(1099.277 946.032) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_18" data-name="Rectangle 18" class="cls-3" width="89" height="32" rx="4" transform="translate(1122.277 1005.032) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_31" data-name="Rectangle 31" class="cls-2" width="89" height="32" rx="4" transform="translate(1183.277 984.032) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_7" data-name="Rectangle 7" class="cls-3" width="89" height="32" rx="4" transform="translate(1278.869 578.461) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_23" data-name="Rectangle 23" class="cls-3" width="89" height="32" rx="4" transform="translate(1301.869 637.461) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_36" data-name="Rectangle 36" class="cls-2" width="89" height="32" rx="4" transform="translate(1362.869 616.461) rotate(-64)"/{amp}gt; {amp}lt;rect id="Rectangle_9" data-name="Rectangle 9" class="cls-3" width="89" height="32" rx="4" transform="translate(1009.907 1129.253) rotate(-64)"/{amp}gt; {amp}lt;/g{amp}gt; {amp}lt;/svg{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; /* Keyframes */ @keyframes slide { from { top: 0; } to { top: 100%; } } /* General Stying */ body { margin: 0; padding: 0; } .hero--wrapper .hero--inner { max-height: 745px; height: 745px; overflow: hidden; } .page--center { margin: 0 auto; max-width: 1140px; padding: 0 20px; } .hero--wrapper .hero--inner .svg-rect--el { position: relative; height: 100%; width: 100%; } .hero--wrapper .hero--inner .svg-rect--el svg { position: absolute; top: 0; bottom: 0; right: 0; } .hero--wrapper .hero--inner .svg-rect--el svg rect { animation: slide 10s linear infinite; } 

Ссылка на jsfiddle

Это не так много, поэтому я приношу свои извинения, но, если кто-то может указать мне правильное направление, это будет с благодарностью.

Благодарность :)

хорошая идея! Вот один из способов сделать это. Эта версия использует SMIL анимацию. обратное движение — это что-то вроде хака, возможно, есть лучший способ его реализовать.

как это в основном работает: я помещаю прямоугольники в 0,0 и перемещаю их вправо. Я вычисляю, как долго прямоугольник должен пройти свою собственную длину ( расстояние между двумя канатами), а затем устанавливаю начальное время анимации в отрицательное значение, соответствующее его позиции, чтобы он достиг своего правильного места в момент времени 0 с.

если у вас есть какие-либо вопросы, просто спросите, я изменю ответ, чтобы уточнить, как это работает … надеюсь, это поможет

 var svgns = "http://www.w3.org/2000/svg" function rect(w, h, c) { var rect = document.createElementNS(svgns, "rect") rect.setAttribute("width", w) rect.setAttribute("height", h) rect.setAttribute("class", c) return rect } function animate(from, to, dur, begin) { var anim = document.createElementNS(svgns, "animate") anim.setAttribute("attributeName", "x") anim.setAttribute("from", from) anim.setAttribute("to", to) anim.setAttribute("dur", dur) anim.setAttribute("begin", begin) anim.setAttribute("repeatCount", "indefinite") return anim } function createRow(rectWidth, rectHeight, rectPadding, numRects, dur, classes) { var g = document.createElementNS(svgns, "g") var totalWidth = (rectWidth   rectPadding) * (numRects) var distanceToTravel = (rectWidth   rectPadding) * (numRects) var pixelPerSecond = distanceToTravel / dur var durPerRect = (rectWidth   rectPadding) / pixelPerSecond for (var i = 0; i {amp}lt; numRects; i  ) { var r = rect(rectWidth, rectHeight, classes[i % classes.length]) var a = animate(-(rectWidth   rectPadding), distanceToTravel, dur, -(i * durPerRect)) r.appendChild(a) g.appendChild(r) } return g } row1.appendChild(createRow(89, 32, 5, 10, 17, ["c1", "c2", "c2", "c1", "c3"])) row2.appendChild(createRow(89, 32, 5, 10, 13, ["c2", "c1", "c1", "c3", "c2"])) row3.appendChild(createRow(89, 32, 5, 10, 11, ["c3", "c3", "c1", "c2", "c1"])) 
 rect { rx: 5 } .c1 { fill: #38324d; } .c2 { fill: #42cc7f; } .c3 { fill: #937ce3; } 
 {amp}lt;svg id="svg" width="300" height="200" viewBox="0 0 600 400"{amp}gt; {amp}lt;g transform="translate(200,0) rotate(-61, 300, 60) translate(-100,0)"{amp}gt; {amp}lt;g id="row1"/{amp}gt; {amp}lt;g id="row2" transform="translate(0,40)"/{amp}gt; {amp}lt;/g{amp}gt; {amp}lt;g transform="translate(200,0) rotate(119, 300, 110) translate(-100,0)"{amp}gt; {amp}lt;g id="row3" transform="translate(0,80)"/{amp}gt; {amp}lt;/g{amp}gt; {amp}lt;/svg{amp}gt;