質問編集履歴
2
markdownを挿入し見やすくいたしましたのでよろしくお願いいたします。
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,10 +11,10 @@
|
|
|
11
11
|
tweenmaxを使用しています。
|
|
12
12
|
|
|
13
13
|
■知りたいこと
|
|
14
|
-
下記の
|
|
14
|
+
下記の1~3について何か1つでもご教授して頂けると幸いです。
|
|
15
|
-
|
|
15
|
+
0. 実装方法
|
|
16
|
-
|
|
16
|
+
0. そもそもこの方向性で実装できるのか
|
|
17
|
-
|
|
17
|
+
0. もっといい方法があるのか
|
|
18
18
|
|
|
19
19
|
### 発生している問題・エラーメッセージ
|
|
20
20
|
|
|
@@ -24,6 +24,9 @@
|
|
|
24
24
|
|
|
25
25
|
### 該当のソースコード
|
|
26
26
|
|
|
27
|
+
```html
|
|
28
|
+
|
|
29
|
+
|
|
27
30
|
<!DOCTYPE html>
|
|
28
31
|
<html lang="jp">
|
|
29
32
|
<head>
|
|
@@ -46,14 +49,15 @@
|
|
|
46
49
|
<body>
|
|
47
50
|
|
|
48
51
|
|
|
52
|
+
|
|
49
53
|
<div id="wrapper">
|
|
50
54
|
<div class="test">
|
|
51
55
|
<div class="loop_js" id="loop_js" style="transform: translate(0%, 0%);">
|
|
52
56
|
<ul>
|
|
53
|
-
<li><a href="#"><img src="
|
|
57
|
+
<li><a href="#"><img src="" alt="" height="200px" width="200px"></a></li>
|
|
54
|
-
<li><a href="#"><img src="
|
|
58
|
+
<li><a href="#"><img src="" alt="" height="200px" width="200px"></a></li>
|
|
55
|
-
<li><a href="#"><img src="
|
|
59
|
+
<li><a href="#"><img src="" alt="" height="200px" width="200px"></a></li>
|
|
56
|
-
<li><a href="#"><img src="
|
|
60
|
+
<li><a href="#"><img src="" alt="" height="200px" width="200px"></a></li>
|
|
57
61
|
</ul>
|
|
58
62
|
|
|
59
63
|
</div>
|
|
@@ -66,6 +70,7 @@
|
|
|
66
70
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
|
67
71
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
|
|
68
72
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
|
|
73
|
+
|
|
69
74
|
<script>
|
|
70
75
|
$(function () {
|
|
71
76
|
const loop = document.getElementById('loop_js');
|
|
@@ -109,7 +114,7 @@
|
|
|
109
114
|
|
|
110
115
|
</body>
|
|
111
116
|
</html>
|
|
112
|
-
|
|
117
|
+
```
|
|
113
118
|
### 試したこと
|
|
114
119
|
|
|
115
120
|
ここに問題に対して試したことを記載してください。
|
1
urlリンクが取得できていなかったので変更しました。
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
translateのy座標を取得する方法について
|
|
1
|
+
translateのy座標をjavascriptで取得する方法について
|
body
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
### 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
下記URlのような縦方向無限ループスライダーの実装を画面いっぱいに設定しています。
|
|
4
|
-
[リンク](
|
|
4
|
+
[リンク](https://coding-labo.jp/javascript/slide-loop-2/)
|
|
5
5
|
|
|
6
6
|
この縦方向スライダーにスクロール機能を追加するために
|
|
7
7
|
mousewheeleventを通してスクロールした点のtranslateのY座標を取得し、値をいくらか変更をすることでスクロールを実装しようとしています。
|