オークニズム

はてなブログでのカスタマイズやブログ運営ノウハウをメインに、オークニが気になったモノ、コトをシェアするブログ。

オークニズム

オークニのイズム満載ブログカスタマイズ

【ネタ】CSSのアニメーションを使って画像をビヨンビヨンさせる方法w

【ネタ】CSSのアニメーションを使って画像をビヨンビヨンさせる方法w アイキャッチ

CSSのポテンシャルは底知れない…

本日、CSSのアニメーションに関するテクニックを漁っていましたら、とんでもテクニックを発見しましたので、その備忘録的な記事です。

マジで「どこで使う所あるねん😂 」ってテクニックですので、あんまり参考にしない方がいいですwww

それでは早速、”インパクト抜群”のCSSアニメーションを使ったビヨンビヨン画像を御覧ください!

縦バージョン

【ネタ】CSSのアニメーションを使って画像をビヨンビヨンさせる方法w ジャンプ的な画像

【ネタ】CSSのアニメーションを使って画像をビヨンビヨンさせる方法w プレッシャー的な画像

横バージョン

【ネタ】CSSのアニメーションを使って画像をビヨンビヨンさせる方法w ごろ寝的な画像

【ネタ】CSSのアニメーションを使って画像をビヨンビヨンさせる方法w ガン寝的な画像

画像は全てぴよたその素材です。僕のプロフィール画像もここのやつですね!ぴよたそについては以前にも記事にしたことがあるので、興味がある人はご覧ください。 

 

スポンサーリンク

まるでgif画像

やばくないですか?

完全に伸び縮みしてますよね?

まるでgif画像かと思いますよね?

CSSだけなんです!

CSSだけなので、gif画像みたいに重たくなることもなく、解像度も鮮明、その上アニメーションもウルトラ滑らか。やべー。

作り方気になりますよね?

え、ならない?

いやいやいや、気になって仕方ないでしょ。

どこで使うねんとかはさておき!とりあえずこーゆーアニメーションがどーゆーCSSで書かれているのか?そこが気になる人もいるはず!

ってことで、半ば無理やり作り方へいきましょう!w

まずはCSSを準備

流れとしてはとても簡単。事前に用意していたCSSのclassやらidをビヨンビヨンさせたい画像にHTML編集から付与するだけ。CSSもコピペでOK。

CSS

はてなブログの場合の貼り付け場所

管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」

コードはこちら

/*********************************
画像をビヨンビヨン
*********************************/
#biyon-tate{
margin-top:200px;
-webkit-animation-name:biyon-tate;
-webkit-animation-property:-webkit-transform;
-webkit-animation-duration:500ms;
-webkit-animation-timing-function:ease-out;
-webkit-animation-iteration-count:infinite;
-webkit-transform-origin:center bottom;
}
@-webkit-keyframes biyon-tate{
0%{
}
25%{
-webkit-transform:scale(.8,1.6);
}
100%{
-webkit-transform:scaleX(1.2,.5);
}
}
#biyon-yoko{
margin-top:;
-webkit-animation-name:biyon-yoko;
-webkit-animation-property:-webkit-transform;
-webkit-animation-duration:500ms;
-webkit-animation-timing-function:ease-out;
-webkit-animation-iteration-count:infinite;
-webkit-transform-origin:center bottom;
}
@-webkit-keyframes biyon-yoko{
0%{
}
25%{
-webkit-transform:scale(1.6,.8);
}
100%{
-webkit-transform:scaleX(1.2,.5);
}
}
view raw gistfile1.txt hosted with ❤ by GitHub

これでCSSの事前準備は完了です。とくに調整するようなところもないかな?

ポイントは「keyframes」というやつです。

これは、地味に僕のブログでも使っているやつで、ページ更新時に色々上からとか横からとかスーッてスライドしてきたりするやつ。これを「keyframes」で制御してます。

今回はとりあえずネタ記事なので、keyframesの説明とかは割愛します!w

HTMLでの実装方法

上記のCSSが事前に準備できれば、後はHTMLにて#biyon-tateとか#biyon-yokoとかを付与してあげるだけでOKです。

たとえば記事内の画像で使う場合、

<img id="biyon-tate" src="画像URL" alt=""  />

このように、挿入した画像のimgタグ内の先頭でも末尾でもどこでもいいのですが、id="biyon-tate"というように付与します。

これだけでOK!

もちろん、編集画面では変化ありませんが、プレビューなりすると完全にビヨンビヨンしています。

まとめ

これ、なんか応用方法ないかな?w

たとえばプロフィールの画像に適用するのもアリ、SNSアイコンとか、フォローボタン、あるいはFont Awesomeのアイコンに適用するのもアリ、なんならヘッダー画像に使うのはどうだろう?!

誰か、このテクニックを応用してブログのアクセントにできた方、ご報告くださいませ😂