- jQuery 透明度を変更する
- 画像や要素の透明度を指定の値にフェードイン、フェードアウトするサンプルです。 ボタンを押すと１０段階で画像の透明度が上がり、画像が消えて行きます。 fadeOutメソッドを使うと一発で消えてしまうので、少しずつ透明度をコントロールす...
- 2019-08-03 22:56:20
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
画像
画像を扱うサンプルいろいろ。
「画像」に関するサンプル
- jQuery マウスオーバーで画像入れ替え
- マウスのカーソルを合わせると画像が入れ替わるサンプルです。 jQueryで画像の読み込みが完了した後に、オンマウスすると別の画像を表示します。 画像の入れ替えは、imgタグのsrc属性の値の文字列を置換するシンプルな記述...
- 2019-07-30 21:58:07
- CSS 湯気の表現
- 温かいものの演出に使える湯気の表現です。 SVGの画像をCSSでアニメーションして、２枚の画像を使って湯気の表現を実装します。 この画像は３層になっています。 一番上に湯気の通り道だけ透明の肉ま...
- 2019-07-28 05:23:44
- jQuery 画像読み込んでから発火
- 重い画像を読み込んだ後に表示します。 大きな画像や画質の高い画像は読み込みに若干時間がかかります。 読み込み中にJSが発火してしまうと、画面がガタついたり、予期せぬ動きをしてしまったりしま...
- 2019-08-07 21:46:57
- jQueryとCSS カードをクリックでめくる表現
- jQueryとCSSのアニメーションを使って、カードをクリックすると画像がめくれる表現のサンプルです。 以前カードをめくるような表現のサンプルを記載しましたが、改善版です。 要素をコピペで量産、順番を変えてもJSの修正は不要のため、編集が楽になりました。...
- 2019-07-28 04:58:36
- CSS3 画像を左右に回転する
- 要素をCSSのアニメを使い、左右にかしげるような表現のサンプルです。 CSS3で手軽にアニメーションが使えるようになり、回転とループアニメを組み合わせると下記のような動きをつけることができます。 左右に回転するアニメーショ...
- 2019-07-29 06:53:21
- jQuery スワイプできるカルーセルスライド
- スワイプで次の画像が表示されるjQueryのみで実装した画像のスライドです。 jQueryを利用したプラグインのスライダーや、利用しないプレーンなスライダーもあ...
- 2019-07-29 05:02:26
- jQuery 画像のコピー防止の比較
- 画像のコピー防止といっても、基本的にスマホやPCに表示されている時点で、ブラウザに保存されており、しかもキャプチャでも撮ってしまえば、閲覧者は同じ画像を...
- 2019-08-07 17:19:03
- jQuery 右クリックを画像ごとに制御
- Webサイトが出回り出したときから、ずっと版権、著作権的な問題は課題となっています。 そこでいつも、こんなこと出来ないか、と挙がってくるのが、保存防止を...
- 2019-08-07 17:08:42
- webGL 図形を描画してみる
- WebGLについてです。WebGL(Web Graphics Library)は、ブラウザで３Dを表現するときの標準仕様です。2016年現在の最新版のブラウザはほぼ全て対応しています。HTM...
- 2019-07-30 21:21:19
Top