パララックスを使う

ワードプレス

だいぶ下火になってきたけれど、今も一定の需要があるパララックス。

パララックスを適用したものの、動かなくなっちゃったサイトの修復とか。

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

このプラグインを有効にしていると、固定ページ編集画面を離れる際、
「サイトを離れますか?行った変更が保存されない可能性があります。」
のメッセージが出るようです。

テーマに内蔵

ウロウロ探し回っているときに見つけた記事のサンプル。

背景のみに効果を適用するjQueryプラグインです。

プラグイン不要の基本的なパララックス効果をサイトに実装する

「background-position」を動的に変える方式なのでガタつきはあるのですが、非常に良い感じでしたので、テーマに組み込んでみました。

ブロックのid・効果の度合いをjsに渡して、適用するブロックごとにスクリプトを出力するようにしています。

視差効果を適用した背景中の要素

背景にディレイをかけるパターン。

ビューポートに入ると動作が始まるので、下部のブロックで背景が切れてしまうことが少ないです。

ロード時と、ビューポートに入ってくる瞬間の不自然さCSSで打ち消すように出来る場合はとても便利な感じです。

視差効果を適用した背景中の要素

背景を固定するパターン。

ビューポートに入ると動作が始まるので、下部のブロックで背景が切れてしまうことが少ないです。

ロード時と、ビューポートに入ってくる瞬間の不自然さCSSで打ち消すように出来る場合はとても便利な感じです。