質問編集履歴
1
HTMLとJSのソースを追記しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,7 +12,38 @@
|
|
|
12
12
|
transform-origin:1;としても、transform-origin:0;が優先されてしまうからかと思います。
|
|
13
13
|
|
|
14
14
|
### 現在のコード
|
|
15
|
+
```HTML
|
|
16
|
+
<ul class="row">
|
|
17
|
+
<li class="left invisible">
|
|
18
|
+
<img src="./images/ms_left.png">
|
|
19
|
+
</li>
|
|
20
|
+
<li class="center">
|
|
21
|
+
<img src="./images/ms_center.png">
|
|
22
|
+
</li>
|
|
23
|
+
<li class="right">
|
|
24
|
+
<img src="./images/ms_right.png">
|
|
25
|
+
</li>
|
|
26
|
+
</ul>
|
|
27
|
+
```
|
|
15
28
|
```css
|
|
29
|
+
/* 色エリア */
|
|
30
|
+
.left::after {
|
|
31
|
+
content:'';
|
|
32
|
+
width: 100%;
|
|
33
|
+
height: 100%;
|
|
34
|
+
background-color:red;
|
|
35
|
+
position: absolute;
|
|
36
|
+
top: 0;
|
|
37
|
+
left: 0;
|
|
38
|
+
/* animation-name: scale;
|
|
39
|
+
animation-duration: 2s; */
|
|
40
|
+
display: block;
|
|
41
|
+
transition: all 2s ease-in-out;
|
|
42
|
+
transition-delay: 0.38s;
|
|
43
|
+
transform-origin: left;
|
|
44
|
+
z-index: 1;
|
|
45
|
+
}
|
|
46
|
+
|
|
16
47
|
.spread {
|
|
17
48
|
animation-name: spread;
|
|
18
49
|
transform-origin: 0;
|
|
@@ -48,6 +79,24 @@
|
|
|
48
79
|
}
|
|
49
80
|
```
|
|
50
81
|
|
|
82
|
+
```JavaScript
|
|
83
|
+
function maisonStyle() {
|
|
84
|
+
var scroll = $(window).scrollTop();
|
|
85
|
+
var windowHeight = $(window).height();
|
|
86
|
+
var target = $('.maison-style');
|
|
87
|
+
var targetPos = target.offset().top;
|
|
88
|
+
var scrollAmount = targetPos - windowHeight;
|
|
89
|
+
// console.log(scrollAmount);
|
|
90
|
+
// console.log(scroll);
|
|
91
|
+
if(scroll > scrollAmount + 300) {
|
|
92
|
+
$('.left').addClass('spread');
|
|
93
|
+
setTimeout( function() {
|
|
94
|
+
$('.left').addClass('shrink');
|
|
95
|
+
},
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
51
100
|
### 知りたいこと
|
|
52
101
|
②左から右へ消えていくアニメーションを実現する方法、ないでしょうか。
|
|
53
102
|
参考サイトのソースを見ても、答えが得られませんでした...。
|