質問編集履歴
1
HTMLとJSのソースを追記しました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -26,8 +26,70 @@
|
|
|
26
26
|
|
|
27
27
|
### 現在のコード
|
|
28
28
|
|
|
29
|
+
```HTML
|
|
30
|
+
|
|
31
|
+
<ul class="row">
|
|
32
|
+
|
|
33
|
+
<li class="left invisible">
|
|
34
|
+
|
|
35
|
+
<img src="./images/ms_left.png">
|
|
36
|
+
|
|
37
|
+
</li>
|
|
38
|
+
|
|
39
|
+
<li class="center">
|
|
40
|
+
|
|
41
|
+
<img src="./images/ms_center.png">
|
|
42
|
+
|
|
43
|
+
</li>
|
|
44
|
+
|
|
45
|
+
<li class="right">
|
|
46
|
+
|
|
47
|
+
<img src="./images/ms_right.png">
|
|
48
|
+
|
|
49
|
+
</li>
|
|
50
|
+
|
|
51
|
+
</ul>
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
|
|
29
55
|
```css
|
|
30
56
|
|
|
57
|
+
/* 色エリア */
|
|
58
|
+
|
|
59
|
+
.left::after {
|
|
60
|
+
|
|
61
|
+
content:'';
|
|
62
|
+
|
|
63
|
+
width: 100%;
|
|
64
|
+
|
|
65
|
+
height: 100%;
|
|
66
|
+
|
|
67
|
+
background-color:red;
|
|
68
|
+
|
|
69
|
+
position: absolute;
|
|
70
|
+
|
|
71
|
+
top: 0;
|
|
72
|
+
|
|
73
|
+
left: 0;
|
|
74
|
+
|
|
75
|
+
/* animation-name: scale;
|
|
76
|
+
|
|
77
|
+
animation-duration: 2s; */
|
|
78
|
+
|
|
79
|
+
display: block;
|
|
80
|
+
|
|
81
|
+
transition: all 2s ease-in-out;
|
|
82
|
+
|
|
83
|
+
transition-delay: 0.38s;
|
|
84
|
+
|
|
85
|
+
transform-origin: left;
|
|
86
|
+
|
|
87
|
+
z-index: 1;
|
|
88
|
+
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
31
93
|
.spread {
|
|
32
94
|
|
|
33
95
|
animation-name: spread;
|
|
@@ -98,6 +160,42 @@
|
|
|
98
160
|
|
|
99
161
|
|
|
100
162
|
|
|
163
|
+
```JavaScript
|
|
164
|
+
|
|
165
|
+
function maisonStyle() {
|
|
166
|
+
|
|
167
|
+
var scroll = $(window).scrollTop();
|
|
168
|
+
|
|
169
|
+
var windowHeight = $(window).height();
|
|
170
|
+
|
|
171
|
+
var target = $('.maison-style');
|
|
172
|
+
|
|
173
|
+
var targetPos = target.offset().top;
|
|
174
|
+
|
|
175
|
+
var scrollAmount = targetPos - windowHeight;
|
|
176
|
+
|
|
177
|
+
// console.log(scrollAmount);
|
|
178
|
+
|
|
179
|
+
// console.log(scroll);
|
|
180
|
+
|
|
181
|
+
if(scroll > scrollAmount + 300) {
|
|
182
|
+
|
|
183
|
+
$('.left').addClass('spread');
|
|
184
|
+
|
|
185
|
+
setTimeout( function() {
|
|
186
|
+
|
|
187
|
+
$('.left').addClass('shrink');
|
|
188
|
+
|
|
189
|
+
},
|
|
190
|
+
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
101
199
|
### 知りたいこと
|
|
102
200
|
|
|
103
201
|
②左から右へ消えていくアニメーションを実現する方法、ないでしょうか。
|