質問編集履歴
2
コードの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,17 +1,23 @@
|
|
|
1
1
|
wordpressにて、gsapのscrollTriggerを実装したいのですが、動作しないため、以下の実装方法で不足している部分を教えていただきたく存じます。
|
|
2
|
+
（img要素にパララックスをかける目的ですが、一切反応しないといった具合です。）
|
|
3
|
+
エラーなどは特に出ておりません。
|
|
2
4
|
|
|
3
5
|
functions.phpに以下の通り読み込み用のコードを書いています。（jQueryも使うため含んでいます。）
|
|
4
6
|
gsapの読み込みは「function theme_gsap_script」以降になります。
|
|
5
|
-
ここの前提がもし間違っていたら教えていただければ幸いです。
|
|
6
7
|
ちなみに以下のサイトを参考に記述したものです。
|
|
7
8
|
https://greensock.com/wordpress/
|
|
8
9
|
|
|
9
10
|
scrollTriggerの内容はすべてapp.jsというファイルに書いていることを前提にしています。
|
|
10
11
|
|
|
12
|
+
|
|
13
|
+
```functions.php
|
|
14
|
+
|
|
11
15
|
<?php
|
|
16
|
+
|
|
12
17
|
function st_enqueue_scripts() {
|
|
13
18
|
wp_deregister_script('jquery');
|
|
14
19
|
wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), '3.5.1', false);
|
|
20
|
+
|
|
15
21
|
wp_enqueue_script('main', get_theme_file_uri('main.js'), array('jquery'), false, true);
|
|
16
22
|
}
|
|
17
23
|
add_action('wp_enqueue_scripts', 'st_enqueue_scripts');
|
|
@@ -26,3 +32,28 @@
|
|
|
26
32
|
}
|
|
27
33
|
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
|
|
28
34
|
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
```html
|
|
38
|
+
<img data-y="-50" class="fadein js-parallax" src="<?php the_field('img') ?>" alt="">
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
```app.js
|
|
42
|
+
|
|
43
|
+
gsap.registerPlugin(ScrollTrigger);
|
|
44
|
+
|
|
45
|
+
gsap.utils.toArray('.js-parallax').forEach(wrap => {//指定した要素をwrapとして取り出す
|
|
46
|
+
const y = wrap.getAttribute('data-y') || -100;//要素の位置の初期設定
|
|
47
|
+
|
|
48
|
+
gsap.to(wrap, {
|
|
49
|
+
y: y,
|
|
50
|
+
scrollTrigger: {
|
|
51
|
+
trigger: wrap,
|
|
52
|
+
start: 'top bottom',
|
|
53
|
+
end: 'bottom top',
|
|
54
|
+
scrub: 0.5,
|
|
55
|
+
markers: true
|
|
56
|
+
}
|
|
57
|
+
})
|
|
58
|
+
});
|
|
59
|
+
```
|
1
参考サイトの追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,8 +3,10 @@
|
|
|
3
3
|
functions.phpに以下の通り読み込み用のコードを書いています。（jQueryも使うため含んでいます。）
|
|
4
4
|
gsapの読み込みは「function theme_gsap_script」以降になります。
|
|
5
5
|
ここの前提がもし間違っていたら教えていただければ幸いです。
|
|
6
|
+
ちなみに以下のサイトを参考に記述したものです。
|
|
7
|
+
https://greensock.com/wordpress/
|
|
6
8
|
|
|
7
|
-
scrollTriggerの内容はすべてapp.jsというファイルに書いている前提
|
|
9
|
+
scrollTriggerの内容はすべてapp.jsというファイルに書いていることを前提にしています。
|
|
8
10
|
|
|
9
11
|
<?php
|
|
10
12
|
function st_enqueue_scripts() {
|
|
@@ -15,11 +17,11 @@
|
|
|
15
17
|
add_action('wp_enqueue_scripts', 'st_enqueue_scripts');
|
|
16
18
|
|
|
17
19
|
function theme_gsap_script(){
|
|
18
|
-
|
|
20
|
+
|
|
19
21
|
wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js', array(), false, true );
|
|
20
|
-
|
|
22
|
+
|
|
21
23
|
wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js', array('gsap-js'), false, true );
|
|
22
|
-
|
|
24
|
+
|
|
23
25
|
wp_enqueue_script( 'app', get_template_directory_uri() . 'app.js', array('gsap-js'), false, true );
|
|
24
26
|
}
|
|
25
27
|
add_action( 'wp_enqueue_scripts', 'theme_gsap_script' );
|