画像・動画

驚きの演出!WordPressユーザー必見!CSSで画像やテキストをグリグリ動かす方法

広告:ページ内にてアフィリエイト広告を利用しています。

CSSで画像やテキストをグリグリ動かす方法

ウェブサイトの魅力的な演出に欠かせないCSSアニメーション。

本記事では、WordPressユーザー必見の、画像やテキストをグリグリ動かす方法をご紹介します!

驚きの効果でユーザーを引き込み、サイトの魅力をアップさせましょう。

PR

CSS を使って画像を動かすサンプル

画像を左から右に動かしてみます。

走る人のシルエット

画像を CSS で左から右に 400ピクセル動かしています。再生回数を無限にしています。

アニメーションを利用することで、次のような演出も可能になります。

斜め掛けバッグの写真

【オシャレに着こなす大人のカジュアル】

スタイリッシュなあなたに合わせる、ふわっと優しさを見せつつも男を感じさせるファッション。ワンポイントの決め手にショルダーでシックにキメるコントラストがたまらない。

【シックに着こなす大人のカジュアル】

ダンディなあなたに合わせる、大人カジュアル、遊びすぎない色合いにワンポイントでシックに決めるブラックショルダーのコントラストがたまらない。

斜め掛けバッグの写真

※ スクロール等で、要素が画面表示されてからアニメーションを開始させるには別途 JavaScript での実装が必要になります。

画像をフェードイン表示する、画像をズームイン表示するなどもアニメーションの一つです。

走る人のシルエット
通勤する人のシルエット
小人のシルエット

それでは、WordPress 上で、実際に簡単なアニメーションを実現してみましょう!

CSS を使ってアニメーションさせる方法

WordPress で画像をアニメーションさせる場合は、画像にクラスを指定して、CSS でアニメーションを指定します。

■ Step.1 画像に クラス名 を指定する

画像にクラス名を付けるイメージ

「記事編集画面」で、画像・イメージのプロパティで「高度な設定」の中にある「追加CSSクラス」にクラス名を記載します。

ここでは仮に「myTestImage」を記入しています。

■ Step.2 CSS を記載する

CSSを記入するイメージ

「記事編集画」面で、「カスタムHTMLブロック」に CSS のコードを貼り付けます。

以下のサンプルコードを貼ってください。

<style>
.myTestImage{
    animation: name_animTest 3s infinite;
}

@keyframes name_animTest {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(400px);
    }
}
</style>

■ Step.3 動かしてみる

プレビュー画面で動かしてみましょう。

次の画像のように、左から右に動いたら成功です。

イノシシのシルエット

楽しいですね!

アニメーション CSS の説明

■ 「animation」プロパティ

動かしたいイメージに「myTestImage」クラス名を付けました。このクラスに対して、「animation」プロパティを設定しています。

.myTestImage{
    animation: name_animTest 3s infinite;
}

「animation」プロパティで「アニメーションをすること」と指定しています。

値の意味は次の通りです。

name_animTest


どのようなアニメーション(変化)をさせるかを設定するために、名前を付けます。
ここでは「name_animTest」の名前を付けていますが、「test1」でも「sample_anima」でも任意の文字列を付けることができます。
※この文字列は、後ほど使います。
3s


アニメーション(変化)させる秒数を指定しています。「3s」で3秒です。
開始から終了までの時間を指定します。

infinite


「アニメーション」を無限に繰り返す指定です。
指定しない場合、アニメーションは1回で止まります。

■ アニメーション(変化)の指定「@keyframes」

どのようなアニメーションをするかを「@keyframes」で指定します。

@keyframes name_animTest {
    0% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(400px);
    }
}

「@keyframes」でアニメーションの方法を指定します。「@keyframes」の後ろに、「animation」プロパティで指定した名前を記載します。

ここでは、先ほど指定した「name_animTest」を記載しています。

「0%」や「100%」は、アニメーションの開始と終了の間の「地点」を表します。

アニメーションの時間とパーセント

「0%」は開始直後、

「50%」はちょうど真ん中、

「100%」は終了時点です。

「0%」のアニメーション開始時に「transform: translateX(0px);」でX軸(横位置)は 0px の場所を指定し、「100%」のアニメーション終了時に「transform: translateX(400px);」 でX軸(横位置)は400px の場所を指定しています。

最初の「animation」プロパティで、アニメーションの時間を「3s(3秒)」と指定していますので、3秒かけて横に0pxの位置から400pxの位置まで画像が移動します。

いろいろなアニメーションを作ってみる

CSS の部分を書き換えることで多様なアニメーションができます。いくつかサンプルを見てみましょう。

■ ズームイン

画像をズームインしながら、フェードイン(ボワっと表示)しています。

オバケのシルエット
<style>
.myTestImage {
    animation: name_animTest 3s infinite;
}

@keyframes name_animTest {
    0%, 20% {
        transform: scale(0.5);
        opacity: 0;
    }
    95% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
</style>

「scale」は大きさを表します。「scale(0.5)」は大きさ50%、「scale(1)」は100%の大きさです。

「opacity」は透明度です。0で透明(見えない)、1で非透明(完全に見える)です。

  • 0%~20% の間は、「opacity: 0;」なので見えません。「scale(0.5);」なので、大きさは50%になっています。
  • 20%~95% の間は、「opacity: 0;」 →「opacity: 1;」 とアニメーションしますので、ぼんやり表示していきます。さらに 「scale(0.5);」 → 「scale(1);」とアニメーションしますので大きさが50%→100%に変化します。
  • 95%~100% の間でぼんやり消しています。

■ 下から現れてちょっと上下にブレる

下から現れて、上まで行ったらちょっと上下にポコポコ移動します。

蝙蝠のシルエット
<style>
.myTestImage {
    animation: name_animTest 3s infinite;
}

@keyframes name_animTest {
    0% {
        transform: translateY(140px);
        opacity: 0;
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    60% {
        transform: translateY(30px);
    }
    70% {
        transform: translateY(0px);
    }
    80% {
        transform: translateY(20px);
    }
    95% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
</style>

「translateY」で、Y軸(縦)の位置を変えて移動させています。

■ くねくねさせてみる

ぐにょんぐにょんクネクネさせています。

お化けと家のシルエット
<style>
.myTestImage {
    animation: name_animTest 3s infinite;
}

@keyframes name_animTest {
    0% {
        transform: skew(0deg, 0deg);
    }
    10%, 60% {
        transform: skew(5deg, 5deg);
    }
    20%, 70% {
        transform: skew(-4deg, -4deg);
    }
    30%, 80% {
        transform: skew(3deg, 3deg);
    }
    40%, 90% {
        transform: skew(-2deg, -2deg);
    }
    50%, 100% {
        transform: skew(1deg, 1deg);
    }
}
</style>

「skew」で画像に角度を付けています。プラス方向とマイナス方向に交互に角度を付けることで、クネクネさせています。

WordPress もっと!お役立ちテクニック

WordPress のお役立ちテクニックはこちら

PR

まとめ

CSS では、画像などをアニメーションさせることができます。

  • 画像にクラス名を付けます
  • animation プロパティでアニメーションの時間や属性を指定します
  • Keyframesでアニメーションの動きを指定します

多様な動きで表現することができますので、記事のデザインが楽しくなりますね、

40代・50代「会社員におすすめ」の在宅でできる副業5選

40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)

40代、50代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では40代、50代におすすめの副業5選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる)

20代、30代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。20代、30代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い(または少ない)主婦におすすめの副業ができれば安心ですね。記事では、20代、30代専業主婦におすすめの副業3選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介!

【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介!快適な移住先も紹介します

都会は住みにくい!地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす!おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る

もっと WordPress のノウハウを知りたいときは

WordPress の情報、テクニック一覧はこちらをクリック!

クリックアイコン
PR
ブログの始め方
レンタルサーバー
WordPress
AFFINGER

ブログランキング・にほんブログ村へ  

Presented By Boon Boon Blog .Com

広告の設置・収入について

当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。

当サイトは Google アドセンスを利用し、広告により収入を得ています。

当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。

電気通信事業法改正に伴う表記