質問編集履歴

2

質問内容の修正

2018/11/20 06:46

投稿

y01
y01

スコア9

test CHANGED
@@ -1 +1 @@
1
- スマホでwow.jsのdata-wow-duration適用されません
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では、data-wow-duration="3s"いうのが適用され、
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
- スマホでもdata-wow系のクリック時にも適用させたいです。
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

文字の修正

2018/11/20 06:46

投稿

y01
y01

スコア9

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