- jQuery 透明度を変更する
- 画像や要素の透明度を指定の値にフェードイン、フェードアウトするサンプルです。 ボタンを押すと１０段階で画像の透明度が上がり、画像が消えて行きます。 fadeOutメソッドを使うと一発で消えてしまうので、少しずつ透明度をコントロールす...
- 2019-08-03 22:56:20
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
デザイン
デザインに関するUIのサンプルです。
「デザイン」に関するサンプル
- jQuery マウスオーバーで画像入れ替え
- マウスのカーソルを合わせると画像が入れ替わるサンプルです。 jQueryで画像の読み込みが完了した後に、オンマウスすると別の画像を表示します。 画像の入れ替えは、imgタグのsrc属性の値の文字列を置換するシンプルな記述...
- 2019-07-30 21:58:07
- CSS 湯気の表現
- 温かいものの演出に使える湯気の表現です。 SVGの画像をCSSでアニメーションして、２枚の画像を使って湯気の表現を実装します。 この画像は３層になっています。 一番上に湯気の通り道だけ透明の肉ま...
- 2019-07-28 05:23:44
- jQuery 長押しで発動
- マウスやスマホ用の長押しボタンのサンプルです。 クリックやタップの他に、長く押された時にイベントを発生したときは以下のように作ります。 このサンプルではボタンに触れて２秒後に設定しています。...
- 2019-07-28 04:12:53
- CSS マーカーのような表現
- 蛍光ペンで文字の上に線を引いたような表現のサンプルです。 文章の中で、目立たせたいときに、よく蛍光ペンで線を引きます。 CSSで思いのほか、簡単にできます。 サンプルの文章で、大事な部分に、水色をつけて...
- 2019-08-03 22:19:57
- jQuery フェードインアウト
- fadeIn,fadeOutのメソッドは、ミリ秒単位で速さの指定ができます。 jQueryの使う上で、最もシンプルでよく使う演出の一つです。 .demo_btn{ display:...
- 2019-07-29 05:14:24
- CSS3 flexを使った配置３（行間の操作）
- 以前掲載した、flexで配置した時の改行のサンプルに続き、行全体の配置のサンプルです。 まずは共通のスタイルを用意します。 .demo_box{ backgroun...
- 2019-08-03 21:29:20
- CSS3 flexを使った配置２（要素の改行）
- 以前掲載した、flexでシンプルに横に並べるサンプルに続き、子要素の数が多くなった時の応用編です。 まずは共通のスタイルを用意します。 .demo_box{...
- 2019-07-30 21:50:18
- CSS3 flexを使った配置１（横の位置）
- flexを使ってfloatのような配置を実装します。 CSS3より追加されたflexのサンプルです。 flexという言葉の通りこれがあればレイアウトをうまいことやってくれるのでfloatやmarginで悩むことが減りそうです。...
- 2019-07-29 21:51:41
- jQuery スクロールでクラス付加、解除
- スクロールするとクラスを追加して、変化させるサンプルです。 要素がブラウザの中央付近になったときに、エフェクトがかかるデザインをよく見かけるようになりました。 このサンプルでは、特定クラスで囲った要素までスク...
- 2019-07-28 17:14:04
Top