CSS 背景画像をマスクして左右に動かす 縦長の四角形の中に横長の画像を入れ、左右にアニメーションさせるサンプルです。 横幅を狭いエリアに、横長の画像を配置すると全体に小さくするしかありません。 そんな時、サイズは大きなまま画像の全体を表示するために、アニメーショ... 2021-05-28 13:55:39
CSS 画像をフィルターするアニメーション 切り抜いた画像を重ねて移動することで、画像の一部をフォーカスしたような演出をするサンプルです。 ぼかしている画像の一部が鮮明に見える表現です。 実際は、ぼかしている画像の上に切り抜かれた画像が置かれており、切り抜く部分をアニメーションで変化させ... 2019-11-15 17:47:52
CSS3 やわらかい動き ポヨンと弾力のあるアニメーションの演出です。 CSSのアニメを使ってやわらかい表現を付加します。 表示時とクリックしたときに発動するサンプルです。 クラスを設定すれば、要素は画像でもSVGでも文字で... 2019-08-03 22:14:07
CSS3 要素を回転させる 要素にクラスを指定して回転、逆回転させるサンプルです。 CSS3では簡単に画像やオブジェクトを回転させることができます。 アイキャッチにはなりますが、多用すると目が疲れるので使うところは考えましょう。 まず... 2019-08-03 21:58:12
jQueryとCSS カードをクリックでめくる表現 jQueryとCSSのアニメーションを使って、カードをクリックすると画像がめくれる表現のサンプルです。 以前カードをめくるような表現のサンプルを記載しましたが、改善版です。 要素をコピペで量産、順番を変えてもJSの修正は不要のため、編集が楽になりました。... 2019-07-28 04:58:36
CSS3 画像を左右に回転する 要素をCSSのアニメを使い、左右にかしげるような表現のサンプルです。 CSS3で手軽にアニメーションが使えるようになり、回転とループアニメを組み合わせると下記のような動きをつけることができます。 左右に回転するアニメーショ... 2019-07-29 06:53:21
CSS3 震える表現 画像や文字がアニメーションすると、どうしても見てしまいます。 縦と横それぞれに揺らす表現は以前紹介しました。 縦と横の動きを混ぜることで、シャッフ... 2019-07-29 05:10:08
CSS3 アニメーション ここではCSS3によるアニメーションを紹介します。 JavaScriptやSVGなどでもアニメーションの表現できますが、気軽に作れる点ではCSS3が一番長けてると思います。 ただし、幾つかのブラウザでは開発中だったり... 2019-07-31 22:32:43