質問編集履歴
2
質問内容の修正
test
CHANGED
@@ -1 +1 @@
|
|
1
|
-
スマホでwow.js
|
1
|
+
nnmnスマホでwow.jsが動作しないです。
|
test
CHANGED
@@ -4,19 +4,9 @@
|
|
4
4
|
|
5
5
|
恐れ入ります。
|
6
6
|
|
7
|
-
wow.js、animate.cssを利用してワードプレスで画像に動きをつけています
|
7
|
+
wow.js、animate.cssを利用してワードプレスで画像に動きをつけていますが、
|
8
8
|
|
9
|
-
|
10
|
-
|
11
|
-
クリックしたら動きを付けるように別途wowclick.jsという名前でjsを書いているのですが、
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
PC
|
9
|
+
PCだとスクロールして動きだすのですがスマホだとスクロール後に動き出すことができません。
|
16
|
-
|
17
|
-
スマホになるとアニメーション(今回だとbounceIn)はされるものの、
|
18
|
-
|
19
|
-
data-wow-durationが効きません。
|
20
10
|
|
21
11
|
|
22
12
|
|
@@ -26,13 +16,7 @@
|
|
26
16
|
|
27
17
|
```
|
28
18
|
|
29
|
-
PCのみdata-wow-durationがソース上で確認でき(chromeの開発画面)、
|
30
|
-
|
31
|
-
スマホではソース上から消えてしまっています。
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
スマホでも
|
19
|
+
スマホでもスクロール後に動くことを適用させたいです。
|
36
20
|
|
37
21
|
```
|
38
22
|
|
@@ -46,89 +30,9 @@
|
|
46
30
|
|
47
31
|
【動かす画像のコード】
|
48
32
|
|
49
|
-
<img class="wow aligncenter wp-image-4285" src="images/image1.png" alt="" width="200" height="200" data-wow-duration="3s"/>
|
33
|
+
<img class="wow bounce aligncenter wp-image-4285" src="images/image1.png" alt="" width="200" height="200" data-wow-duration="3s"/>
|
50
34
|
|
51
35
|
|
52
|
-
|
53
|
-
【wowclick.js】という名前で作成
|
54
|
-
|
55
|
-
/*animated bounceをクリック後に追加させたい*/
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
$(function(){
|
60
|
-
|
61
|
-
$("#bounce").on({
|
62
|
-
|
63
|
-
"click":function(){
|
64
|
-
|
65
|
-
$(this).addClass("animated bounce");
|
66
|
-
|
67
|
-
},
|
68
|
-
|
69
|
-
"webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend":function(){
|
70
|
-
|
71
|
-
$(this).removeClass("animated bounce");
|
72
|
-
|
73
|
-
}
|
74
|
-
|
75
|
-
});
|
76
|
-
|
77
|
-
});
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
【functions.php】
|
82
|
-
|
83
|
-
if (!is_admin()) {
|
84
|
-
|
85
|
-
function register_script(){
|
86
|
-
|
87
|
-
$ieua = $_SERVER['HTTP_USER_AGENT'];
|
88
|
-
|
89
|
-
wp_deregister_script( 'jquery' );
|
90
|
-
|
91
|
-
wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', array(), '1.12.4' );
|
92
|
-
|
93
|
-
wp_register_script( 'wowclick', get_theme_file_uri('/library/js/libs/wowclick.js'), array('jquery'), true );
|
94
|
-
|
95
|
-
if(!wp_is_mobile() && !strstr($ieua, 'Trident') && !strstr($ieua, 'MSIE') && (get_option('side_options_animatenone') == "ani_on")){
|
96
|
-
|
97
|
-
wp_register_script( 'wow', get_theme_file_uri('/library/js/libs/wow.min.js'), array('jquery'), '', true );
|
98
|
-
|
99
|
-
}
|
100
|
-
|
101
|
-
wp_register_script( 'main-js', get_theme_file_uri('/library/js/scripts.js'), array( 'jquery' ), '', true );
|
102
|
-
|
103
|
-
}
|
104
|
-
|
105
|
-
function add_script() {
|
106
|
-
|
107
|
-
register_script();
|
108
|
-
|
109
|
-
wp_enqueue_script('jquery');
|
110
|
-
|
111
|
-
wp_enqueue_script( 'wow' );
|
112
|
-
|
113
|
-
wp_enqueue_script( 'wowclick' );
|
114
|
-
|
115
|
-
}
|
116
|
-
|
117
|
-
add_action('wp_enqueue_scripts', 'add_script');
|
118
|
-
|
119
|
-
}
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
クリックをしないで普通に遅らせようとしても
|
126
|
-
|
127
|
-
data-wow-durationがうまくスマホだけ動作しませんでした。
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
<img class="wow animated infinite bounce aligncenter wp-image-4285" src="images/image1.png" alt="" width="200" height="200" data-wow-duration="3s"/>
|
132
36
|
|
133
37
|
|
134
38
|
|
@@ -137,14 +41,6 @@
|
|
137
41
|
|
138
42
|
|
139
43
|
### 試したこと
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
functions.phpに以下の列を1行追加しています。
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
wp_register_script( 'wowclick', get_theme_file_uri('/library/js/libs/wowclick.js'), array('jquery'), true );
|
148
44
|
|
149
45
|
|
150
46
|
|
1
文字の修正
test
CHANGED
File without changes
|
test
CHANGED
@@ -32,7 +32,7 @@
|
|
32
32
|
|
33
33
|
|
34
34
|
|
35
|
-
スマホでもdata-wow系の動きを適用させたいです。
|
35
|
+
スマホでもdata-wow系の動きをクリック時にも適用させたいです。
|
36
36
|
|
37
37
|
```
|
38
38
|
|