- CSS3 やわらかい動き
- ポヨンと弾力のあるアニメーションの演出です。 CSSのアニメを使ってやわらかい表現を付加します。 表示時とクリックしたときに発動するサンプルです。 クラスを設定すれば、要素は画像でもSVGでも文字で...
- 2019-08-03 22:14:07
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
アニメーション
ウェブでアニメーションを表現するサンプルです。
「アニメーション」に関するサンプル
- CSS3 要素を回転させる
- 要素にクラスを指定して回転、逆回転させるサンプルです。 CSS3では簡単に画像やオブジェクトを回転させることができます。 アイキャッチにはなりますが、多用すると目が疲れるので使うところは考えましょう。 まず...
- 2019-08-03 21:58:12
- CSS3 画像を左右に回転する
- 要素をCSSのアニメを使い、左右にかしげるような表現のサンプルです。 CSS3で手軽にアニメーションが使えるようになり、回転とループアニメを組み合わせると下記のような動きをつけることができます。 左右に回転するアニメーショ...
- 2019-07-29 06:53:21
- CSS3 震える表現
- 画像や文字がアニメーションすると、どうしても見てしまいます。 縦と横それぞれに揺らす表現は以前紹介しました。 縦と横の動きを混ぜることで、シャッフ...
- 2019-07-29 05:10:08
- jQuery パララックス 簡易版
- パララックスとは、視差効果を使って奥行きを出す表現のことです。 よくいろんなサイトで使われるのは、マウスやスクロールによって、要素が時間差で動くこと...
- 2019-08-07 17:44:53
- jQuery スワイプできるカルーセルスライド
- スワイプで次の画像が表示されるjQueryのみで実装した画像のスライドです。 jQueryを利用したプラグインのスライダーや、利用しないプレーンなスライダーもあ...
- 2019-07-29 05:02:26
- CSS3 要素を揺らす
- 画像やテキストなど要素を目立たせるために縦や横に揺らすサンプルです。CSS3で実装しています。 位置を移動させループ再生をしています。 縦に揺らす...
- 2019-07-29 05:58:03
- jQuery アコーディオンメニュー
- スマホなどの限られたスペースの中で、いろんな項目の内容を表示させたいときに、便利なのがアコーディオンメニューです。 クリックすると見出しごとに詳細情...
- 2019-07-29 05:54:34
- CSS3 ウィンドウサイズ変更でアニメーション
- ウィンドウのサイズが変わった時にアニメーションでレイアウトを変えたいときに使う表現です。 MediaQueryを使ってウィンドウサイズによってレスポンシブに変...
- 2019-07-29 05:49:53
- SVG 読み込みアニメ
- SVGでローディングのアニメーションのサンプルを紹介します。 通常の画像に比べて非常に軽量なので読み込みが早く、また自由な表現ができるので、待ち時間の...
- 2019-08-06 23:35:28
Top