【ネタ】CSSのアニメーションを使って画像をビヨンビヨンさせる方法ｗ
CSSのポテンシャルは底知れない…
本日、CSSのアニメーションに関するテクニックを漁っていましたら、とんでもテクニックを発見しましたので、その備忘録的な記事です。
マジで「どこで使う所あるねん😂 」ってテクニックですので、あんまり参考にしない方がいいですｗｗｗ
それでは早速、”インパクト抜群”のCSSアニメーションを使ったビヨンビヨン画像を御覧ください！
縦バージョン
横バージョン
画像は全てぴよたその素材です。僕のプロフィール画像もここのやつですね！ぴよたそについては以前にも記事にしたことがあるので、興味がある人はご覧ください。
まるでgif画像
やばくないですか？
完全に伸び縮みしてますよね？
まるでgif画像かと思いますよね？
CSSだけなんです！
CSSだけなので、gif画像みたいに重たくなることもなく、解像度も鮮明、その上アニメーションもウルトラ滑らか。やべー。
作り方気になりますよね？
え、ならない？
いやいやいや、気になって仕方ないでしょ。
どこで使うねんとかはさておき！とりあえずこーゆーアニメーションがどーゆーCSSで書かれているのか？そこが気になる人もいるはず！
ってことで、半ば無理やり作り方へいきましょう！ｗ
まずはCSSを準備
流れとしてはとても簡単。事前に用意していたCSSのclassやらidをビヨンビヨンさせたい画像にHTML編集から付与するだけ。CSSもコピペでOK。
CSS
はてなブログの場合の貼り付け場所
管理画面より、「デザイン」→「カスタマイズ」→「デザインCSS」
コードはこちら
これでCSSの事前準備は完了です。とくに調整するようなところもないかな？
ポイントは「keyframes」というやつです。
これは、地味に僕のブログでも使っているやつで、ページ更新時に色々上からとか横からとかスーッてスライドしてきたりするやつ。これを「keyframes」で制御してます。
今回はとりあえずネタ記事なので、keyframesの説明とかは割愛します！ｗ
HTMLでの実装方法
上記のCSSが事前に準備できれば、後はHTMLにて#biyon-tateとか#biyon-yokoとかを付与してあげるだけでOKです。
たとえば記事内の画像で使う場合、
<img id="biyon-tate" src="画像URL" alt="" />
このように、挿入した画像のimgタグ内の先頭でも末尾でもどこでもいいのですが、id="biyon-tate"というように付与します。
これだけでOK！
もちろん、編集画面では変化ありませんが、プレビューなりすると完全にビヨンビヨンしています。
まとめ
これ、なんか応用方法ないかな？ｗ
たとえばプロフィールの画像に適用するのもアリ、SNSアイコンとか、フォローボタン、あるいはFont Awesomeのアイコンに適用するのもアリ、なんならヘッダー画像に使うのはどうだろう？！
誰か、このテクニックを応用してブログのアクセントにできた方、ご報告くださいませ😂
