(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連THE THOR

【THE THOR】プロフィール画像のアニメーションのカスタマイズ

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約4分で読めます。

【広告】

※ 本ページには【広告】が含まれています

WordPressテーマ THE THOR(ザ・トール)

別ブログサイトのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR(ザ・トール)を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト
MASAa.blog│パズドラ好きのmasaaが情報発信する1st WordPressブログサイト

今回は、WordPressテーマ THE THOR(ザ・トール)で「プロフィール画像のアニメーション」のカスタマイズについてまとめてみました。

WordPressテーマ THE THOR(ザ・トール)プロフィール画像のアニメーション

以前のエントリー記事で「イメージ画像を回転させるカスタマイズ」を行い、プロフィール画像に対して回転させるアニメーション化を行っています。

【THE THOR】イメージ画像を回転させるカスタマイズ
WordPressテーマ THE THOR(ザ・トール)での「イメージ画像を回転させる」カスタマイズについてまとめてみました。今回、丸い形のイメージ画像としてプロフィール画像に採用してみました。

現在の「プロフィール画像のアニメーション」のスタイルは、次の様になっています。

【THE THOR】プロフィール画像のアニメーションのカスタマイズ

このアニメーションの動作は、左右に傾く(回転)単純なものです。

この動きにもそろそろ飽きてきたので、もう少し手を加えたアニメーションの動きを取り入れたいと思います。

プロフィール画像のアニメーションのカスタマイズ

WordPressテーマ THE THOR(ザ・トール)での「プロフィール画像のアニメーション」のカスタマイズを行います。

カスタマイズ内容

「プロフィール画像のアニメーション」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

但し、以前プロフィール画像に対してアニメーション化のカスタマイズを行っている場合は、カスタマイズ内容を上書きする必要があります。

/************************************
** ■イメージ画像を回転+浮かすスタマイズ
************************************/
.archiveHead__authorImg img, /*投稿記事一覧のプロフィールアイコン*/
.widgetProfile__img img { /*プロフィールアイコン*/
	animation: ukasu 8s infinite ease-in-out 0s alternate; /*回転+浮かすアニメーション*/
}
@keyframes ukasu { /*浮かすアニメーション*/
	0% {
		transform:translate(0, 5px) rotate(0deg);
	}
	50% {
		transform:translate(0, -80px) rotate(30deg);
	}
	100% {
		transform:translate(0, 5px) rotate(70deg);
	}
}
.archiveHead__authorImg img:hover, /*投稿記事一覧のプロフィールアイコン ホバー時*/
.widgetProfile__img img:hover { /*プロフィールアイコン ホバー時*/
	animation: kaiten 0s linear infinite; /*回転中止*/
	opacity: 1.0; /*不透明度*/
}

カスタマイズ後のプロフィール画像のアニメーション

今回のカスタマイズによって、「プロフィール画像のアニメーション」は、次の様になりました。

【THE THOR】プロフィール画像のアニメーションのカスタマイズ

今回のカスタマイズでは、従来の回転のアニメーションに加えて、上下のアニメーションを追加しました。

今回は位置を3箇所設定し、各位置の設定と角度の設定を行っています。

具体的には、

「translate(【A】px, 【B】px) rotate(【C】deg)」に対して、

  • 【A】=X座標
  • 【B】=Y座標
  • 【C】=角度

で設定を行います。

また、「 animation: ukasu 【D】s infinite ease-in-out 0s alternate;」に対して、

  • 【D】=動作時間

で設定します。

実際のプロフィール画像の動きについては、ZMASAa.blogでご確認下さい。

最後に

コンテンツの位置にアニメーション的な動きがあると興味を持って貰えると言うことで、一定の効果はあると思います。

しばらくはこの動きとしておきますが、また機会があれば変更していきたいと思います。

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 本ページ内には【広告】が含まれています

コメント

【広告】