だいぶ下火になってきたけれど、今も一定の需要があるパララックス。
パララックスを適用したものの、動かなくなっちゃったサイトの修復とか。
js
たくさんあって選ぶのが大変ですが、試したものをいくつか。
enllax.js
もう古くなっちゃった感じ。
ガタつきが激しいので「SmoothScroll.min.js」と一緒に使うケースが多かったようですが、いつの間にか動かなくなっていた。
これをきっかけに他のプログラム探しを始めました。
lax.js
いろいろ出来る感じなのですが、使い方の情報が乏しい。
オプションについて、添付のドキュメントにもほとんど記述なし。
惜しいのですが、あきらめ。
rellax.js
結構有名と思います。
https://dixonandmoe.com/rellax/
子要素を動かす場合は使いやすいと思いますが、背景に効果を適用することは出来なさそう。
場合によっては、という感じ。
ワードプレスプラグイン
何年も前に更新が止まっているものが多く、探せたのは2つだけ。
Parallax Image
PCではうまく動くのですが、iPhoneでは適用したブロックが非表示になりNG。
スマートフォンで効果をオフにするオプションは見つからず。
画像をメディアライブラリから選べず、フルパスで手入力する、など使い勝手もあまりよくない。
Advanced WordPress Backgrounds
動作に問題はなさそう。
設定も細かくできるので常用できそうな感じ。
日本語の解説記事が無いみたいなので、少しいじってから記事にしようと思います。
2021.03.13
このプラグインを有効にしていると、固定ページ編集画面を離れる際、
「サイトを離れますか?行った変更が保存されない可能性があります。」
のメッセージが出るようです。WP5.6で話題になった問題との関係は不明ですが、プラグインを無効化するとメッセージは出ないので、ちょっと様子見。
テーマに内蔵
ウロウロ探し回っているときに見つけた記事のサンプル。
背景のみに効果を適用するjQueryプラグインです。
「background-position」を動的に変える方式なのでガタつきはあるのですが、非常に良い感じでしたので、テーマに組み込んでみました。
ブロックのid・効果の度合いをjsに渡して、適用するブロックごとにスクリプトを出力するようにしています。