- CSS ボタンのホバーアニメ
- ボタンにマウスを合わせた時の斜めに色がつくアニメーションのサンプルです。 CSSのhoverやfocusで発動するボタンのエフェクトのサンプルを用意しました。 デザインで調整をすることが多いため、わかりやすくシンプルなCSSにしています。...
- 2021-01-01 23:05:09
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
アニメーション
ウェブでアニメーションを表現するサンプルです。
「アニメーション」に関するサンプル
- WebGL 立体を回転してみる
- 立体を描画し、それを3Dで回転させるサンプルです。 参考サイトMDNを参考にサンプルをそのまま実装してみました。 まだ、筆者も理解が浅いので、今日はここまでです。 下記のサイトを参考にしていま...
- 2020-11-03 22:40:47
- jQuery 告知テキストの演出
- ブラウザの上部中央に固定でちょっとした告知を表示するサンプルです。 例えば、何かを保存したときや、検索が見つからなかったときなど、ただ文字を書いてあげるだけじゃなく、アニメーションで強調したいときに使えます。...
- 2020-06-08 00:27:43
- jQuery フォームに非同期で値をセット
- フォームにajaxで取得したJSONの値をセットするサンプルです。 フォームに予めデータを埋め込む時は「value=""」でセットしますが、書きのフォームのHTMLは空です。 そこに対してJSで値を埋めています。 [[ <form...
- 2020-04-12 22:04:52
- JS 波のアニメーション
- canvasを使ったアニメーションで波のような動きのサンプルです。 円弧の描画を繰り返して、波のようなアニメーションを実装しています。 実装にはjQueryを使っています。 HTML [[<canvas id="canvas_wav...
- 2020-03-28 22:57:39
- jQuery 狭いエリアに文字をアニメで格納する
- 文字列を動的に埋め込むとき、デザインの都合上、どうしても横幅に 制限あるときがよくある。そんな時に使ってほしいサンプルがこちら。 スマホなどの横幅が狭い画面で、人の名前や地名など動的に入ってくる文字を設置したいことがあります。 そんなときサーバーサイドで文字を切って「…...
- 2020-01-27 00:36:08
- CSS 画像をフィルターするアニメーション
- 切り抜いた画像を重ねて移動することで、画像の一部をフォーカスしたような演出をするサンプルです。 ぼかしている画像の一部が鮮明に見える表現です。 実際は、ぼかしている画像の上に切り抜かれた画像が置かれており、切り抜く部分をアニメーションで変化させ...
- 2019-11-15 17:47:52
- jQuery 自動ドア風アニメーション
- 画像や文字などを隠しておいて、クリックで表示させるサンプルです。 まずは、シンプルに表示させるパターンです。 toggle fadeToggle slideToggle トグルは表示、非表示。フェードは徐々に透明度で変化。ス...
- 2019-07-29 07:56:24
- CSS 左右に行き来するアニメーション
- 車、電車などホームページでちょっとした演出を施したいときのサンプルです。 CSSのアニメーションを利用して、画像を左右に行き来させています。 画像を変えればいろんなものに応用ができます。 一部jQueryを使ってますが、ほぼCSSの...
- 2019-07-28 14:44:36
- CSS 湯気の表現
- 温かいものの演出に使える湯気の表現です。 SVGの画像をCSSでアニメーションして、２枚の画像を使って湯気の表現を実装します。 この画像は３層になっています。 一番上に湯気の通り道だけ透明の肉ま...
- 2019-07-28 05:23:44
Top