質問編集履歴

4

2017/12/02 02:12

投稿

stellanova
stellanova

スコア12

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  現状は横並びにして回転しながら表示させるところまでいきましたが、『順番に』というところでつまずいています。
14
14
 
15
- cssで似た表示にはできたのですが、当たり前ですが1度表示されると表示されたままになってしまいますので、inview.jsを使用してスクロールの度に作動するようにしたいと思っております。
15
+ cssで似た表示にはできたのですが、当たり前ですが1度表示されると表示されたままになってしまいますので、inview.jsを使用してスクロールの度に作動するようにしたいと思っております。
16
16
 
17
17
 
18
18
 

3

誤字

2017/12/02 02:12

投稿

stellanova
stellanova

スコア12

test CHANGED
File without changes
test CHANGED
@@ -202,7 +202,7 @@
202
202
 
203
203
  ```
204
204
 
205
- を入れ、.mv01にdisplay: none; を入れる事で順番に表示されるようにはなりましたが、代わりに回転がなくなり、スクロールで画面から外れた後元に戻ると回転だけの元の動作に戻ってしまいました。
205
+ を入れ、.mv01にdisplay: none; を入れる事で順番に表示されるようにはなりましたが、代わりに回転がなくなり、スクロールで画面から外れた後元に戻ると回転だけの元の動作に戻ってしまいました。
206
206
 
207
207
 
208
208
 

2

修正

2017/11/29 13:26

投稿

stellanova
stellanova

スコア12

test CHANGED
File without changes
test CHANGED
@@ -90,12 +90,6 @@
90
90
 
91
91
  }
92
92
 
93
- .bgcolor-gray {
94
-
95
- background-color: #f1f1f1;
96
-
97
- }
98
-
99
93
  .works-content {
100
94
 
101
95
  overflow: hidden;
@@ -106,10 +100,6 @@
106
100
 
107
101
  transition: .8s;
108
102
 
109
-
110
-
111
-
112
-
113
103
  }
114
104
 
115
105
  .turn-mv01 {
@@ -118,10 +108,6 @@
118
108
 
119
109
  -webkit-transform: rotateY(0deg);
120
110
 
121
-
122
-
123
-
124
-
125
111
  }
126
112
 
127
113
  .mv01 {
@@ -164,6 +150,40 @@
164
150
 
165
151
  if (isInView) {
166
152
 
153
+ $(item);
154
+
155
+ }
156
+
157
+ });
158
+
159
+ function item() {
160
+
161
+ $('.mv01:hidden').first().fadeIn(100, function () {
162
+
163
+ item();
164
+
165
+ });
166
+
167
+ }
168
+
169
+ </script>
170
+
171
+ ```
172
+
173
+
174
+
175
+ 乱文にて大変恐縮ですが、ご存知の方がいらっしゃいましたら、ご教授お願い致します。
176
+
177
+
178
+
179
+ 経過報告
180
+
181
+ ```js
182
+
183
+ $('.turn').on('inview', function(event, isInView) {
184
+
185
+ if (isInView) {
186
+
167
187
  $(item); // 表示されたら実行するアクション(関数)名
168
188
 
169
189
  }
@@ -180,40 +200,6 @@
180
200
 
181
201
  }
182
202
 
183
- </script>
184
-
185
- ```
186
-
187
-
188
-
189
- 乱文にて大変恐縮ですが、ご存知の方がいらっしゃいましたら、ご教授お願い致します。
190
-
191
-
192
-
193
- 経過報告
194
-
195
- ```js
196
-
197
- $('.turn').on('inview', function(event, isInView) {
198
-
199
- if (isInView) {
200
-
201
- $(item); // 表示されたら実行するアクション(関数)名
202
-
203
- }
204
-
205
- });
206
-
207
- function item() {
208
-
209
- $('.mv01:hidden').first().fadeIn(100, function () {
210
-
211
- item();
212
-
213
- });
214
-
215
- }
216
-
217
203
  ```
218
204
 
219
205
  を入れ、.mv01にdisplay: none; うを入れる事で順番に表示されるようにはなりましたが、代わりに回転がなくなり、スクロールで画面から外れた後元に戻ると回転だけの元の動作に戻ってしまいました。

1

経過報告

2017/11/28 06:30

投稿

stellanova
stellanova

スコア12

test CHANGED
File without changes
test CHANGED
@@ -90,6 +90,12 @@
90
90
 
91
91
  }
92
92
 
93
+ .bgcolor-gray {
94
+
95
+ background-color: #f1f1f1;
96
+
97
+ }
98
+
93
99
  .works-content {
94
100
 
95
101
  overflow: hidden;
@@ -100,6 +106,10 @@
100
106
 
101
107
  transition: .8s;
102
108
 
109
+
110
+
111
+
112
+
103
113
  }
104
114
 
105
115
  .turn-mv01 {
@@ -108,6 +118,10 @@
108
118
 
109
119
  -webkit-transform: rotateY(0deg);
110
120
 
121
+
122
+
123
+
124
+
111
125
  }
112
126
 
113
127
  .mv01 {
@@ -116,6 +130,8 @@
116
130
 
117
131
  -webkit-transform: rotateY(360deg);
118
132
 
133
+ display: none;
134
+
119
135
  }
120
136
 
121
137
  ```
@@ -144,6 +160,26 @@
144
160
 
145
161
  });
146
162
 
163
+ $('.turn').on('inview', function(event, isInView) {
164
+
165
+ if (isInView) {
166
+
167
+ $(item); // 表示されたら実行するアクション(関数)名
168
+
169
+ }
170
+
171
+ });
172
+
173
+ function item() {
174
+
175
+ $('.mv01:hidden').first().fadeIn(100, function () {
176
+
177
+ item();
178
+
179
+ });
180
+
181
+ }
182
+
147
183
  </script>
148
184
 
149
185
  ```
@@ -151,3 +187,37 @@
151
187
 
152
188
 
153
189
  乱文にて大変恐縮ですが、ご存知の方がいらっしゃいましたら、ご教授お願い致します。
190
+
191
+
192
+
193
+ 経過報告
194
+
195
+ ```js
196
+
197
+ $('.turn').on('inview', function(event, isInView) {
198
+
199
+ if (isInView) {
200
+
201
+ $(item); // 表示されたら実行するアクション(関数)名
202
+
203
+ }
204
+
205
+ });
206
+
207
+ function item() {
208
+
209
+ $('.mv01:hidden').first().fadeIn(100, function () {
210
+
211
+ item();
212
+
213
+ });
214
+
215
+ }
216
+
217
+ ```
218
+
219
+ を入れ、.mv01にdisplay: none; うを入れる事で順番に表示されるようにはなりましたが、代わりに回転がなくなり、スクロールで画面から外れた後元に戻ると回転だけの元の動作に戻ってしまいました。
220
+
221
+
222
+
223
+ 引き続きお願い致します。