NEWS

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

最近流行りのサイトはやはりパララックス効果です。
日本語に訳すると視覚効果というところですが、主にサイトをスクロールするとアニメーションのようにサイトが動いているように表示させる方法です。

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

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

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

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

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

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

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

サイトのデザインについてのご質問は、お気軽にご連絡ください。
ご相談はこちらからいただくかまたは、エクスペクト合同会社までご遠慮なくご連絡ください。


https://wordpressdehomepage.work/top/
制作実績はこちらからご確認ください。

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

ABOUT ME
アバター
柳内郁文
エクスペクト合同会社の代表であり、当サイトの運営責任者です。 当サイトの記事のほとんどを書いています。 アバターは元同僚に書いてもらいました。 似ていると思います。