WordPressテーマ THE THOR（ザ・トール）
別ブログサイトのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。
今回は、WordPressテーマ THE THOR（ザ・トール）で「プロフィール画像のアニメーション」のカスタマイズについてまとめてみました。
WordPressテーマ 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; /*不透明度*/
}
カスタマイズ後のプロフィール画像のアニメーション
今回のカスタマイズによって、「プロフィール画像のアニメーション」は、次の様になりました。
今回のカスタマイズでは、従来の回転のアニメーションに加えて、上下のアニメーションを追加しました。
今回は位置を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でご確認下さい。
最後に
コンテンツの位置にアニメーション的な動きがあると興味を持って貰えると言うことで、一定の効果はあると思います。
しばらくはこの動きとしておきますが、また機会があれば変更していきたいと思います。
コメント