jQueryでスクロール量に連動させて、複数要素を動かしたい。

現在作成中のサイトで、jQueryを用い、スクロール量に連動させて複数要素を動かす処理をしたいのですが、para_1しか処理が効かず、残りの物が動きません。para_1~para_7はすべてヒーローヘッダーの要素です。

jQuery
1$(function() {
2  var top = 0;
3  var left = 0;
4  var right = 0;
5	$(window).scroll(function() {
6    var value = $(this).scrollTop();
7    
8    $('.para_1').css('top', top + value / 2);
9    $('.para_2').css('left', left + value / 2);
10    $('.para_3').css('right', right + value / 2);
11    $('.para_4').css('left', left + value / 2);
12    $('.para_5').css('top', top + value / 2);
13    $('.para_6').css('top', top + value / 2);
14    $('.para_7').css('top', top + value / 2);
15  });
16  
17});

HTML
1<div class="hero">
2      <div class="hero-grid" id="hero-grid">
3        <div class="grid-item" id="grid-item_1">
4          <div class="logo para_1">
5            <span class="triangle triangle_1"></span>
6            <span class="triangle triangle_2"></span>
7            <span class="triangle triangle_3"></span>
8          </div>
9        </div>
10        <div class="grid-item" id="grid-item_2">
11          <div class="big-text para_2">
12            <span>X</span>XXXX
13          </div>
14        </div>
15        <div class="grid-item" id="grid-item_3">
16          <div class="big-text para_3"><span>X</span>XXXX</div>
17        </div>
18        <div class="grid-item" id="grid-item_4">
19          <div class="big-text para_4"><span>X</span>XXXXX</div>
20        </div>
21        <div class="grid-item" id="grid-item_5">
22          <ul class="para_5">
23            <li>AAAAA</li>
24            <li>BBBBB</li>
25            <li>CCCCC</li>
26          </ul>
27        </div>
28        <div class="grid-item" id="grid-item_6">
29          <div class="vertical-text para_6">XXXXXXXX</div>
30        </div>
31        <div class="grid-item" id="grid-item_7">
32          <div class="scroll-arrow-box para_7">
33            <div class="scroll-arrow"></div>
34          </div>
35        </div>
36      </div>
37    </div>

Sass
1.hero {
2  position: relative;
3  width: 100%;
4  height: 100vh;
5  top: 0;
6  left: 0;
7  z-index: map-get($layer, "default");
8  padding:0 $padding-pc;
9}
10
11#hero-grid {
12  width: 100%;
13  height: auto;
14  display: grid;
15  grid-template-rows: repeat(3,1fr);
16  grid-template-columns: repeat(5,1fr);
17  grid-template-areas:
18  "... area2 area2 area2 area6"
19  "area1 area3 area3 area5 area6"
20  "area7 area4 area4 area4 area6"
21  ;
22  position: absolute;
23  top: 50%;
24  left: 50%;
25  transform: translate(-50%,-50%);
26
27  .grid-item {
28    color: $color-text-2;
29    display: flex;
30    align-items: center;
31    padding: 8px;
32    line-height: 1;
33  }
34  #grid-item_1 {
35    grid-area: area1;
36    display: flex;
37    justify-content: center;
38    align-items: center;
39    .logo {
40      width: 150px;
41      height: 150px;
42      position: relative;
43      .triangle {
44        background: transparent;
45      }
46      .triangle_1 {
47        position: absolute;
48        bottom: 0;
49        left: 0;
50        width: 0;
51        height: 0;
52        border-style: solid;
53        border-width: 75px 0 0 125px;
54        border-color: transparent transparent transparent $color-accent;
55        z-index:map-get($layer, "item-1" ) ;
56      }
57      .triangle_2 {
58        position: absolute;
59        bottom: 0;
60        right: 0;
61        width: 0;
62        height: 0;
63        border-style: solid;
64        border-width: 0 37.5px 125px 37.5px;
65        border-color: transparent transparent $color-accent transparent;
66        z-index:map-get($layer, "item-2" ) ;
67      }
68      .triangle_3 {
69        position: absolute;
70        top: 0;
71        right: 0;
72        transform: translate(0,25%);
73        width: 0;
74        height: 0;
75        border-style: solid;
76        border-width: 37.5px 0 37.5px 100px;
77        border-color: transparent transparent transparent $color-accent;
78        z-index:map-get($layer, "item-3" ) ;
79        
80      }
81    }
82  }
83  #grid-item_2 {
84    grid-area: area2;
85    .big-text {
86      font-size: 184px;
87      font-weight: bolder;
88    }
89  }
90  #grid-item_3 {
91    grid-area: area3;
92    .big-text {
93      font-size: 184px;
94      font-weight: bolder;
95    }
96  }
97  #grid-item_4 {
98    grid-area: area4;
99    .big-text {
100      font-size: 184px;
101      font-weight: bolder;
102    }
103  }
104  #grid-item_5 {
105    grid-area: area5;
106    ul {
107      height: 100%;
108      padding: 0;
109      display: flex;
110      flex-direction: column;
111      justify-content: center;
112      li {
113        list-style: none;
114        font-size: 24px;
115        padding: 8px 0;
116      }
117    }
118  }
119  #grid-item_6 {
120    grid-area: area6;
121    justify-content: center;
122    .vertical-text {
123      writing-mode: vertical-lr;
124      font-size: 32px;
125    }
126  }
127  #grid-item_7 {
128    grid-area: area7;
129    display: flex;
130    justify-content: center;
131    align-items:center ;
132    position: relative;
133    &::after {
134      content: "more";
135      position: absolute;
136      bottom: 25%;
137      right: 25%;
138
139    }
140    .scroll-arrow-box {
141      width: 100%;
142      height: 100%;
143      display: flex;
144      justify-content: center;
145      align-items:center ;
146      transform: rotate(45deg);
147      .scroll-arrow {
148        background: transparent;
149        margin: 0 auto;
150        width:30%;
151        height: 16px;
152        border-right: 2px solid $color-bg-1;
153        border-bottom: 2px solid $color-bg-1;
154        transform: skewY(45deg);
155      }
156    }
157  }
158}