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 ゼリーということでプルルンと動きます
日本語では一言で表せないものも英語だと伝わりやすいです。
この辺の言葉を抑えておくとプラグインなども効率があがるのではないでしょうか?
#ホームページ
#ワードプレス
#キャッチコピー
#サイト制作