最近流行りのパララックスについて

Last Updated on 2023年5月07日 by ワードプレスの学校 学長 柳内郁文

パララックスとは、日本語では視覚効果と訳され、主にサイトのスクロールにあわせて動くアニメーションを言います。

⇒パララックスについての別の記事

良くあるパターンはスクロールすると
(1)横や下からビローンと画像や文字が出てくる、
(2)文字はスクロールして上に流れるけど背景画像はそのまま流れない、
(3)スクロールにあわせて周りのものが動き出すです。

クリックさせたいボタンなどを表示と同時にビヨンビョンと動くものもあります。
ちなみにマウスを合わせると動いたり、色が変わる設定は視覚効果ではありますが、「ホバー」とか「マウスオーバー」というので、少し違います。

パララックス 言葉の意味と動き

このパララックスですが、英語で表記される場合があるので、言葉の意味と動きを理解しておくと良いでしょう。

Vertical scroll スクロールに合わせて縦に動く
Horizontal scroll スクロールに合わせて横に動く
Transparency 透明と訳されますが、スクロールに合わせて画像が浮かび上がる
Blur ボケた感じからスクロールにあわせてピントがあう
Scale スクロールに合わせて大きくなったり小さくなったりします
Sticky べたべたとかねばねばとか訳されますが、スクロールしても上に表示し続けたりします

パララックス 動きの効果

この他にも動きの効果として

Opposite 反対とか向かいという意味でマウスと逆の方向に動かす
Fade 日本語だとフレームの方がピンときます
Zoom これは日本語でもズームです
Rotate これも何となく伝わりますが、回転のことです
Roll これも回転です
Bounce 弾むということでボンボーンみたいな動きです
Slide これも日本語のスライドです
Flash 日本語のフラッシュでチッカチカみたいな動きです
Pulse パルス信号のことでFlashより緩やかな動きです
Rubber Band ラバーということでゴムのようなボヨヨ~ンみたいな動きです
Shake シェイクで何となく分かると思いますが、振る動きです
Swing スイングでブランコのような揺れ方です
Tada 意味は分かりませんが「ここに注目!」みたいな動きです
Wobble ぐらつくということで大きく揺れます
Jello ゼリーということでプルルンと動きます

日本語では一言で表せないものも英語だと伝わりやすいです。
この辺の言葉を抑えておくとプラグインなども効率があがるのではないでしょうか?

#ホームページ 
#ワードプレス 
#キャッチコピー 
#サイト制作 

この記事についてのご質問がある方はワードプレスの学校でお願いいたします。

当社では、WordPressを用いたWebサイト制作を行っております。
ホームページの制作については、こちらからお気軽にお問い合わせください。

制作実績はこちらからご確認ください。
⇒【View Now!】当社の制作事例をチェック!

ノーコードで簡単ウェブ制作なら断然ELEMENTORが便利です。

ワードプレスの学校

ワードプレスについて何時でも何度でも質問ができる「ワードプレスの学校」を開設しました。
本サイトで解決できなかった問題は直接ワードプレスの学校で質問ができます。
ぜひ、ワードプレスの学校をチェックしてみてください!

Join our newsletter

毎週金曜日に最新のワードプレスの情報を配信しています
いつでも解読できますので、お気軽に登録してください

Join Our School

ワードプレスについて何時でも何度でも質問ができる「ワードプレスの学校」を開設しました。
本サイトで解決できなかった問題は直接ワードプレスの学校で質問ができます。
ぜひ、ワードプレスの学校をチェックしてみてください!

— ワードプレスの学校でワードプレスについて一緒に学びませんか —

ブログを読むより、ユーチューブ動画を見るより、ワードプレスに精通した講師に直接聞いて問題を解決しましょう!ワードプレスの学校は、質問し放題のオンラインスクールです。