CSSでのロールオーバーアニメーションのチュートリアル集まとめ｜BLACKFLAG
古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、 CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。 画像やボタンにロールオーバーした際にCSSアニメーションを使っての さまざまな演出方法についてまとめているサイトも多々あります。 そんなCSSロールオーバーの演出をさまざまなアニメーションを加えるやり方の チュートリアルを紹介しているサイトの中で 個人的に参考になりそうだったものをまとめて紹介してみます。 Some More Subtle Hover Effect Ideas | Codrops Some More Subtle Hover Effect Ideas | Codrops 画像にロールオーバーすることで 重なり合うキャプション等のテキスト情報を さまざまなアニメーションで表示します。 デモは「SET1」
[JS]画像のホバー時の方向によってオーバーレイをスライド表示するスクリプト -SlipHover
デモページ: auto scroll 長いテキストを自動スクロールさせることもできます。 SlipHoverの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="path/to/jquery.min.js"></script> <script src="path/to/jquery.sliphover.min.js"></script> Step 2: HTML 各画像はimg要素で配置しラッパーで内包し、表示するテキストをtitle内に記述します。 <div id="container"> <img src="1.jpg" title="title1" /> <img src="2.jpg" title="title2" /> ... </div> Step 3: JavaScript ラッパーをjQueryの
ロールオーバーを簡単に実装する-Image Rollover Code-
ロールオーバーを簡単に実装する-Image Rollover Code- Image Rollover Codeはロールーオーバーを簡単に実装する為のjsライブラリです。 設置方法 配布元のDaniel Nolanのサイトよりrollover.jsを取得し、head要素内などで読み込みます。 <script src="rollover.js" type="text/javascript"></script> ロールオーバーを実装したいimg要素のclass名に『imgover』を指定します。 <img src="sample.jpg" alt="Some Image" class="imgover" /> すでに、他のclass名がつけられている場合は、半角スペース区切りで指定することにより複数のclass名を指定する事が可能です。 <img src="sample.jpg" alt="S
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
