- このトピックには5件の返信、2人の参加者があり、最後に
により2年、 7ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】15.8.0
【お使いの Snow Monkey Blocks のバージョン】12.4.0
【お使いの Snow Monkey Editor のバージョン】6.1.0
【お使いのブラウザ】Google Chrome
【当該サイトのURL】https://crazyshift.co.jp### 実現したいこと
rellax jsを実装して要素に視差効果を加えたい
### 発生している問題
### 試したこと
AOSを読み込んだ際に行った記述と同じように記述しました。
サイト内でAOSは動作できてるのが確認できたのですが(mvから少し下がった箇所のMISSIONの文字)
rellaxは動作していませんでした。(スクロールした際にmvの動画が次のセクションの後ろに隠れるようにしたい)
以下、my snowmonkeyに記述した内容です。
どなたかご教授頂けますでしょうか？
add_action(
‘wp_enqueue_scripts’,
function() {
<p style=”text-align: left;”>wp_enqueue_style(
‘aos-style’,
‘https://unpkg.com/aos@2.3.1/dist/aos.css’,
[],
false
);</p>
wp_enqueue_script(
‘aos’,
‘https://unpkg.com/aos@2.3.1/dist/aos.js’,
[],
false
);wp_enqueue_script(
‘my_scripts’,
MY_SNOW_MONKEY_URL . ‘/scripts/aosapp.js’,
[‘aos’],
filemtime( MY_SNOW_MONKEY_PATH . ‘/scripts/aosapp.js’ ),
true
);}
);
add_action(
‘wp_enqueue_scripts’,
function() {wp_enqueue_script(
‘rellax’,
‘https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js’,
[],
false
);wp_enqueue_script(
‘my_scripts’,
MY_SNOW_MONKEY_URL . ‘/scripts/my-rellax.js’,
[‘rellax’],
filemtime( MY_SNOW_MONKEY_PATH . ‘/scripts/my-rellax.js’ ),
true
);}
);いいねをした人: 居ませんnixondm13@gmail.comさん
独自のJSが同じハンドル名（
my_scripts）になっているからだと思います。add_action( 'wp_enqueue_scripts', function() {↑同じアクションが重複してますので、1つにしてインデントしたほうが見やすいと思いました(^^;)
add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'aos-style', 'https://unpkg.com/aos@2.3.1/dist/aos.css', [], false ); wp_enqueue_script( 'aos', 'https://unpkg.com/aos@2.3.1/dist/aos.js', [], false ); wp_enqueue_script( 'my-aos', MY_SNOW_MONKEY_URL . '/scripts/aosapp.js', ['aos'], filemtime( MY_SNOW_MONKEY_PATH . '/scripts/aosapp.js' ), true ); wp_enqueue_script( 'rellax', 'https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js', [], true ); wp_enqueue_script( 'my-rellax', MY_SNOW_MONKEY_URL . '/scripts/my-rellax.js', ['rellax'], filemtime( MY_SNOW_MONKEY_PATH . '/scripts/my-rellax.js' ), true ); } );いいねをした人:ありがとうございます！
動くようになりました！
もしお答えいただけたら嬉しいのですがaosの方はcssとjsの下の方がfalseで自分のjsがtrueなのに対して
rellaxの方はどちらもtrueなのはどういった理由なのでしょうか？いいねをした人: 居ませんちょっと書き方が良くなかったですね。（つか、間違ってる・・・(。ﾟωﾟ) ﾊｯ!
以下でも同じ結果になると思います。add_action( 'wp_enqueue_scripts', function() { wp_enqueue_style( 'aos-style', 'https://unpkg.com/aos@2.3.1/dist/aos.css', ); wp_enqueue_script( 'aos', 'https://unpkg.com/aos@2.3.1/dist/aos.js', ); wp_enqueue_script( 'my-aos', MY_SNOW_MONKEY_URL . '/scripts/aosapp.js', ['aos'], filemtime( MY_SNOW_MONKEY_PATH . '/scripts/aosapp.js' ), true // フッターで読み込む ); wp_enqueue_script( 'rellax', 'https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js', ); wp_enqueue_script( 'my-rellax', MY_SNOW_MONKEY_URL . '/scripts/my-rellax.js', ['rellax'], filemtime( MY_SNOW_MONKEY_PATH . '/scripts/my-rellax.js' ), true // フッターで読み込む ); } );wp_enqueue_styleとwp_enqueue_scriptは、Codexやエンジニアのブログが参考になりますが、以下のように引数を置く必要があり、省略できるものもあります。wp_enqueue_style( $handle, $src, $deps, $ver, $media );wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );Snow MonkeyのカスタマイズにはWordPressの知識も必要になりますので、おぼえておくといいかもですね！
いいねをした人:
- トピック「rellax js を実装したい。」には新しい返信をつけることはできません。