質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.31%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

3388閲覧

wordpressにて、gsapのscrollTriggerを実装したいのですが、動作しない

syun217

総合スコア2

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/02/11 07:12

編集2023/02/11 10:56

wordpressにて、gsapのscrollTriggerを実装したいのですが、動作しないため、以下の実装方法で不足している部分を教えていただきたく存じます。
(img要素にパララックスをかける目的ですが、一切反応しないといった具合です。)
エラーなどは特に出ておりません。

functions.phpに以下の通り読み込み用のコードを書いています。(jQueryも使うため含んでいます。)
gsapの読み込みは「function theme_gsap_script」以降になります。
ちなみに以下のサイトを参考に記述したものです。
https://greensock.com/wordpress/

scrollTriggerの内容はすべてapp.jsというファイルに書いていることを前提にしています。

functions.php

1 2<?php 3 4function st_enqueue_scripts() { 5 wp_deregister_script('jquery'); 6 wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), '3.5.1', false); 7 8 wp_enqueue_script('main', get_theme_file_uri('main.js'), array('jquery'), false, true); 9} 10add_action('wp_enqueue_scripts', 'st_enqueue_scripts'); 11 12function theme_gsap_script(){ 13 14 wp_enqueue_script( 'gsap-js', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js', array(), false, true ); 15 16 wp_enqueue_script( 'gsap-st', 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js', array('gsap-js'), false, true ); 17 18 wp_enqueue_script( 'app', get_template_directory_uri() . 'app.js', array('gsap-js'), false, true ); 19} 20add_action( 'wp_enqueue_scripts', 'theme_gsap_script' ); 21

html

1<img data-y="-50" class="fadein js-parallax" src="<?php the_field('img') ?>" alt="">

app.js

1 2gsap.registerPlugin(ScrollTrigger); 3 4gsap.utils.toArray('.js-parallax').forEach(wrap => {//指定した要素をwrapとして取り出す 5 const y = wrap.getAttribute('data-y') || -100;//要素の位置の初期設定 6 7 gsap.to(wrap, { 8 y: y, 9 scrollTrigger: { 10 trigger: wrap, 11 start: 'top bottom', 12 end: 'bottom top', 13 scrub: 0.5, 14 markers: true 15 } 16 }) 17 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

wordpressにて、gsapのscrollTriggerを実装したいのですが、動作しないため、以下の実装方法で不足している部分を教えていただきたく存じます。

動作しないだけでは、どのような状況になっているのかが分かりませんので、どのような動作になったのかを具体的に記載してください。

例えば...
・真っ白な画面になる
・画面にエラーメッセージが表示される
・Webブラウザのデベロッパーツールのコンソールに メッセージが表示される。
・その他(具体的に発生している内容を記載)


また、コードは、マークダウンを使って見やすく記載してください。

動かない内容が不明ですが、Teratail や WordPress フォーラムの質問で一番多いと感じているのが、 404 になっているケースですので、
とりあえず、コードを眺めて推測すると get_template_directory_uri()

Does not return a trailing slash following the directory address

当たりの原因でしょうか。

もしくは、ファイルの配置場所が、get_template_directory_uri のディレクトリと異なるディレクトリに置いているということでしょうか。

投稿2023/02/11 09:09

CHERRY

総合スコア25234

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問