質問編集履歴
4
内容を修正しました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -59,10 +59,5 @@
|
|
|
59
59
|
|
|
60
60
|
Javascriptはあまりよくわかりません。
|
|
61
61
|
|
|
62
|
-
|
|
63
|
-
経験豊富な先輩方の
|
|
64
|
-
お知恵を貸していただければクライアント様も
|
|
65
|
-
非常に喜びますのでとても助かります。
|
|
66
|
-
|
|
67
62
|
お手数をおかけいたしますが，
|
|
68
63
|
どうぞよろしくお願いいたします。
|
3
タイトルを編集しました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
trancelate3dのx項を自動的に一定間隔で動か
|
|
1
|
+
trancelate3dのx項を自動的に一定間隔で動かしたい
|
body
CHANGED
|
File without changes
|
2
タイトルを修正しました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
|
|
1
|
+
trancelate3dのx項を自動的に一定間隔で動かすことができない
|
body
CHANGED
|
File without changes
|
1
内容を変更いたしました。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
社会人1年目の新人webデザイナーです。
|
|
1
|
+
初めて質問をいたします社会人1年目の新人webデザイナーです。
|
|
2
2
|
|
|
3
3
|
下記のサイトのスライド部分（2か所）の実装方法を教えていただけませんでしょうか？
|
|
4
4
|
|
|
@@ -14,12 +14,16 @@
|
|
|
14
14
|
|
|
15
15
|
対象スライドショーは
|
|
16
16
|
|
|
17
|
+
``css
|
|
17
18
|
element.style {
|
|
18
19
|
width: 1280px;
|
|
19
20
|
transition-duration: 500ms;
|
|
20
21
|
transition-timing-function: cubic-bezier(0, 0, 0.25, 1);
|
|
21
22
|
transform: translate3d(**__-640px__**, 0px, 0px);
|
|
22
23
|
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
23
27
|
とCSS3のtranslate3dで実装されています。
|
|
24
28
|
スマホでも非常になめらかにかつフリックに対応して動き，
|
|
25
29
|
ぜひこのスライドを実装したいと考えています。
|
|
@@ -27,26 +31,21 @@
|
|
|
27
31
|
デバイスの最大サイズに合わせて自動的に一定時間間隔で
|
|
28
32
|
変化をするのですが，その方法を教えていただけませんでしょうか？
|
|
29
33
|
|
|
30
|
-
（Javascriptで書く必要があるのかと思い要素検証したのですが，
|
|
31
|
-
該当項目がよくわかりませんでした。）
|
|
32
|
-
|
|
33
34
|
くわえて.pager部分との同期方法もご教示いただけると大変うれしいです。
|
|
34
35
|
(#mainsliderのtranslate3dと同期して自動・一定間隔で
|
|
35
36
|
.currentのクラスが付与され，画像が変わります。)
|
|
36
37
|
|
|
37
38
|
animationプロパティを利用すれば解決が早いかと思うのですが，
|
|
38
|
-
|
|
39
|
+
実際に簡単なものを実装して確認をしたところカクカクと動きが不自然になってしまうため,
|
|
39
40
|
このサイトのようにtransrate3dを一定間隔で変化させることで，
|
|
40
41
|
自動的にスライドする&フリックに対応したスライドを実装したいです。
|
|
42
|
+
(delayプロパティで秒数を遅らせる方法も試してみたのですが,
|
|
43
|
+
それだと繰り返しループにはならず断念いたしました。)
|
|
41
44
|
|
|
42
45
|
＝＝＝＝2．#photosliede 部分＝＝＝＝
|
|
43
46
|
|
|
44
47
|
**#photoslide内に並べられたa要素のleft部分が自動的に減っていき，一定の値になるとロケット鉛筆のようにa要素の並びの一番下（画面で言うと一番上流側）に移動します。この部分はどのように実装をしているのか教えていただけませんでしょうか？
|
|
45
48
|
|
|
46
|
-
（こちらもJavascriptで書く必要があるのかと思い要素検証したのですが，
|
|
47
|
-
該当項目がよくわかりませんでした。）
|
|
48
|
-
|
|
49
|
-
|
|
50
49
|
|
|
51
50
|
●●質問者のレベル●●
|
|
52
51
|
デジタルハリウッド大学で
|