質問編集履歴

1

JSを追加しました。

2020/04/12 06:20

投稿

zakisima2001
zakisima2001

スコア4

test CHANGED
File without changes
test CHANGED
@@ -76,6 +76,232 @@
76
76
 
77
77
  ```css
78
78
 
79
+ /*==================loading design========================*/
80
+
81
+ .breeding-rhombus-spinner {
82
+
83
+ height: 65px;
84
+
85
+ width: 65px;
86
+
87
+ position: relative;
88
+
89
+ transform: rotate(45deg);
90
+
91
+ margin-top:25%;
92
+
93
+ margin-left:auto;
94
+
95
+ margin-right:auto;
96
+
97
+ }
98
+
99
+ .breeding-rhombus-spinner, .breeding-rhombus-spinner * {
100
+
101
+ box-sizing: border-box;
102
+
103
+ }
104
+
105
+ .breeding-rhombus-spinner .rhombus {
106
+
107
+ height: calc(65px / 7.5);
108
+
109
+ width: calc(65px / 7.5);
110
+
111
+ animation-duration: 2000ms;
112
+
113
+ top: calc(65px / 2.3077);
114
+
115
+ left: calc(65px / 2.3077);
116
+
117
+ background-color: #ff1d5e;
118
+
119
+ position: absolute;
120
+
121
+ animation-iteration-count: infinite;
122
+
123
+ }
124
+
125
+ .breeding-rhombus-spinner .rhombus:nth-child(2n+0) {
126
+
127
+ margin-right: 0;
128
+
129
+ }
130
+
131
+ .breeding-rhombus-spinner .rhombus.child-1 {
132
+
133
+ animation-name: breeding-rhombus-spinner-animation-child-1;
134
+
135
+ animation-delay: calc(100ms * 1);
136
+
137
+ }
138
+
139
+ .breeding-rhombus-spinner .rhombus.child-2 {
140
+
141
+ animation-name: breeding-rhombus-spinner-animation-child-2;
142
+
143
+ animation-delay: calc(100ms * 2);
144
+
145
+ }
146
+
147
+ .breeding-rhombus-spinner .rhombus.child-3 {
148
+
149
+ animation-name: breeding-rhombus-spinner-animation-child-3;
150
+
151
+ animation-delay: calc(100ms * 3);
152
+
153
+ }
154
+
155
+ .breeding-rhombus-spinner .rhombus.child-4 {
156
+
157
+ animation-name: breeding-rhombus-spinner-animation-child-4;
158
+
159
+ animation-delay: calc(100ms * 4);
160
+
161
+ }
162
+
163
+ .breeding-rhombus-spinner .rhombus.child-5 {
164
+
165
+ animation-name: breeding-rhombus-spinner-animation-child-5;
166
+
167
+ animation-delay: calc(100ms * 5);
168
+
169
+ }
170
+
171
+ .breeding-rhombus-spinner .rhombus.child-6 {
172
+
173
+ animation-name: breeding-rhombus-spinner-animation-child-6;
174
+
175
+ animation-delay: calc(100ms * 6);
176
+
177
+ }
178
+
179
+ .breeding-rhombus-spinner .rhombus.child-7 {
180
+
181
+ animation-name: breeding-rhombus-spinner-animation-child-7;
182
+
183
+ animation-delay: calc(100ms * 7);
184
+
185
+ }
186
+
187
+ .breeding-rhombus-spinner .rhombus.child-8 {
188
+
189
+ animation-name: breeding-rhombus-spinner-animation-child-8;
190
+
191
+ animation-delay: calc(100ms * 8);
192
+
193
+ }
194
+
195
+ .breeding-rhombus-spinner .rhombus.big {
196
+
197
+ height: calc(65px / 3);
198
+
199
+ width: calc(65px / 3);
200
+
201
+ animation-duration: 2000ms;
202
+
203
+ top: calc(65px / 3);
204
+
205
+ left: calc(65px / 3);
206
+
207
+ background-color: #ff1d5e;
208
+
209
+ animation: breeding-rhombus-spinner-animation-child-big 2s infinite;
210
+
211
+ animation-delay: 0.5s;
212
+
213
+ }
214
+
215
+ @keyframes breeding-rhombus-spinner-animation-child-1 {
216
+
217
+ 50% {
218
+
219
+ transform: translate(-325%, -325%);
220
+
221
+ }
222
+
223
+ }
224
+
225
+ @keyframes breeding-rhombus-spinner-animation-child-2 {
226
+
227
+ 50% {
228
+
229
+ transform: translate(0, -325%);
230
+
231
+ }
232
+
233
+ }
234
+
235
+ @keyframes breeding-rhombus-spinner-animation-child-3 {
236
+
237
+ 50% {
238
+
239
+ transform: translate(325%, -325%);
240
+
241
+ }
242
+
243
+ }
244
+
245
+ @keyframes breeding-rhombus-spinner-animation-child-4 {
246
+
247
+ 50% {
248
+
249
+ transform: translate(325%, 0);
250
+
251
+ }
252
+
253
+ }
254
+
255
+ @keyframes breeding-rhombus-spinner-animation-child-5 {
256
+
257
+ 50% {
258
+
259
+ transform: translate(325%, 325%);
260
+
261
+ }
262
+
263
+ }
264
+
265
+ @keyframes breeding-rhombus-spinner-animation-child-6 {
266
+
267
+ 50% {
268
+
269
+ transform: translate(0, 325%);
270
+
271
+ }
272
+
273
+ }
274
+
275
+ @keyframes breeding-rhombus-spinner-animation-child-7 {
276
+
277
+ 50% {
278
+
279
+ transform: translate(-325%, 325%);
280
+
281
+ }
282
+
283
+ }
284
+
285
+ @keyframes breeding-rhombus-spinner-animation-child-8 {
286
+
287
+ 50% {
288
+
289
+ transform: translate(-325%, 0);
290
+
291
+ }
292
+
293
+ }
294
+
295
+ @keyframes breeding-rhombus-spinner-animation-child-big {
296
+
297
+ 50% {
298
+
299
+ transform: scale(0.5);
300
+
301
+ }
302
+
303
+ }
304
+
79
305
  /*=======================image scroll=========================*/
80
306
 
81
307
  .bg-slider {
@@ -128,6 +354,64 @@
128
354
 
129
355
  ```
130
356
 
357
+ ```js
358
+
359
+ setTimeout(function() { //loaging animation
360
+
361
+ $('.breeding-rhombus-spinner').fadeOut(1000);
362
+
363
+ }, 3500);
364
+
365
+
366
+
367
+ setTimeout(function() { //logo animation
368
+
369
+ $('#footer').css('display', 'none').fadeIn(1500);
370
+
371
+ $('#main').css('display', 'none').fadeIn(1500);
372
+
373
+ $('#top').css('display', 'none').fadeIn(1500);
374
+
375
+ ityped.init(document.querySelector("#ityped"), {
376
+
377
+ backSpeed: 230,
378
+
379
+ typeSpeed: 190,
380
+
381
+ strings: ['...','abc home Page.']
382
+
383
+ })
384
+
385
+ }, 4500);
386
+
387
+
388
+
389
+ jQuery(function($) {
390
+
391
+ $('.bg-slider').bgSwitcher({
392
+
393
+ images: ['images/IMG_0851.jpg','images/DSC04067.jpg','images/IMG_6113.jpg'], // 切替背景画像を指定
394
+
395
+ interval: 3000, // 背景画像を切り替える間隔を指定 3000=3秒
396
+
397
+ loop: true, // 切り替えを繰り返すか指定 true=繰り返す false=繰り返さない
398
+
399
+ shuffle: true, // 背景画像の順番をシャッフルするか指定 true=する false=しない
400
+
401
+ effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定
402
+
403
+ duration: 1000, // エフェクトの時間を指定します。
404
+
405
+ easing: "linear" // エフェクトのイージングをlinear,swingから指定
406
+
407
+ });
408
+
409
+ });
410
+
411
+
412
+
413
+ ```
414
+
131
415
 
132
416
 
133
417
  ### 試したこと
@@ -135,3 +419,7 @@
135
419
 
136
420
 
137
421
  widthをピクセルで指定するとうまく表示してくれます。%やautoだとダメなようで、この違いがよくわかりません。
422
+
423
+ 数秒アニメーションを表示する→アニメーションをフェードアウト→全体を表示(この部分でbgswitcherがうまく表示されない)という流れです。
424
+
425
+ 1日格闘してみましたが、自分には原因が究明できませんでした。