質問編集履歴
1
質問内容修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,8 +1,29 @@
|
|
|
1
1
|
odometer.js を使い、要素が表示されたらアニメーション開始する様に編集したいです。
|
|
2
2
|
現状は画面リロード時にカウントが開始されてしまいます。
|
|
3
3
|
|
|
4
|
-
要素が取得された際にカウントを開始するに
|
|
4
|
+
最終的には要素が取得された際にカウントを開始するようにしたいです。
|
|
5
|
+
下記コードで画面要素を取得してDOMを触ることはできたのですが、カウントは画面リード時に開始されてしまいます。
|
|
6
|
+
```javascript
|
|
7
|
+
$(function() {
|
|
8
|
+
// 引き金となる要素を設定
|
|
9
|
+
let triggerNode = $(".odometer ");
|
|
10
|
+
// 画面スクロール毎に判定を行う
|
|
11
|
+
$(window).scroll(function(){
|
|
12
|
+
// 引き金となる要素の位置を取得
|
|
13
|
+
let triggerNodePosition = $(triggerNode).offset().top;
|
|
14
|
+
// 現在のスクロール位置が引き金要素の位置より下にあれば‥
|
|
15
|
+
if ($(window).scrollTop() > triggerNodePosition - 200) {
|
|
16
|
+
// 動かすJSの指示
|
|
17
|
+
$('.odometer-inside').html();
|
|
18
|
+
//要素が取得されたらpタグ文字色を変える
|
|
19
|
+
$("p").css("color","#ff4500");
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
|
|
5
|
-
shopifyの案件となり、odometer.jsのコードが10000文字を超えておりこちらに掲載できませんでした。
|
|
26
|
+
shopifyの案件となり、odometer.jsのコードが10,000文字を超えておりこちらに掲載できませんでした。
|
|
6
27
|
|
|
7
28
|
かなり伝わりにくいとは思いますが、odometer.jsにおいて何が原因で画面リロード時にカウントが開始されてしまうのでしょうか？
|
|
8
29
|
|