[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック
動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 HTML5 Video 実装 HTML 現在、動画ファイルは二つのフォーマットを用意するのがよいでしょう。WebMはGoogleが推奨するものでChrome, Firefox, Operaでネイティブにサポートされています。 <video autoplay loop poster="polina.jpg" id="bgvid"> <source src="polina.webm" type="video/webm"> <source src="polina.mp4" type="video/mp4"> </video> オーバーレイで表示するコンテンツは、通常通りの実装です。 <div class="overlay"> コンテンツ </div> CSS まずは、動画をフルスクリー
[JS]ページ全体、ページ上のさまざまな要素にオーバーレイをかっこよく表示するスクリプト -plainOverlay
ページ全体にオーバーレイ、アニメーションでカウントダウン plainOverlayの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery-1.11.0.min.js"></script> <script src="jquery.plainoverlay.min.js"></script> </head> Step 2: HTML HTMLはオーバーレイを適用する時に指定できるようidをつけておくと便利です。 <body> <div id="demo">パネル</div> </body> Step 3: JavaScript jQueryのセレクタで要素を指定し、スクリプトを実行します。基本書式は下記のようになります。 //show element.plainOverlay('sh
[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の
さくっと簡単！jQueryでコンテンツをオーバーレイ表示させる方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもです、デザイナーのはやちです✌(´ʘ‿ʘ｀)✌ 梅雨明けの暑さでバテ気味です…この暑さ嫌ですな c⌒っ´ʘ‿ʘ｀)っ はやちは静かに暮らしたい c⌒っ ◞‸◟ )っ そんなこと言ってもこの暑さは和らぎません(◞‸◟) 今回はjQueryで簡単にコンテンツをオーバーレイ表示させる方法をご紹介していきます(◞‸◟) オーバーレイとは ライトボックスのように要素の上に要素を重ねて表示させる方法です 上に重ねる方の要素を半透明にさせて下の要素がうっすら見えるような表現に多く使われます( ˘ω˘)☝ HTML </pre> <div id="overlay"> <p id="text">ｲｪｰｰｲみてるぅ✌(´ʘ‿ʘ｀)✌</p> <p id="close">close</p> </div> <div id="btn">click</div> <pre> ID名overlayはオーバーレイされ
エレメントのホバー時にフェードアウト＆アイコンをオーバーレイできるjQueryプラグイン「Slickhover.js」:phpspot開発日誌
エレメントのホバー時にフェードアウト＆アイコンをオーバーレイできるjQueryプラグイン「Slickhover.js」 2013年05月17日- Slickhover.js エレメントのホバー時にフェードアウト＆アイコンをオーバーレイできるjQueryプラグイン「Slickhover.js」。 画像等のエレメントにオーバーレイすると、アニメーションしつつフェードアウトし、上に画像をかぶせる的なエフェクトを作るためのjQueryプラグイン。 それ以外は何もやってくれませんが、こういう細かなアクションも意外と１から実装しようとすると面倒だったりするものですが、このプラグインで簡単に実装できます 他のプラグインと組み合わせることでクールな演出ができそう 関連エントリ マスクを使ったお洒落なスライダーが作れるjQueryプラグイン「Maskify Slider」 selectボックスをリッチかつク
オーバーレイするグリッドの超クールなデモ:phpspot開発日誌
App Showcase with Grid Overlay オーバーレイするグリッドの超クールなデモ。 はじめてこういうのは見た気がしますが、なかなかクールなのでデモだけでも見ておくとよさそう。 見せ方として面白いデモになっていて、ソースも公開されているので応用してみると面白い物ができそう 有り物や流行りを使うだけではなく、こういう物を自分で考えて作れるデザイナーというのは価値が高そうですね 関連エントリ 垂直アイコンメニュー実装デモ＆サンプルプログラム「Vertical Icon Menu」 ブラウザ上でまるで美術館。3Dイメージギャラリーデモ PayPalの読込中アイコンをCSSで実現したデモ フルスクリーンでページめくりをするUI実装デモ レスポンシブ＆タッチフレンドリなWEBベースの音楽プレイヤー実装デモ これは新しい!パネルレイアウトが美しいスライドショー実装デモ 既にここまで
Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」:phpspot開発日誌
Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」 2013年04月04日- Bootstro.js Bootstrap Intro.js Bootstrapベースのサイトでサイトの使い方をステップ別にオーバレイ表示できる「Bootstro.js」。 サイト上の要素をハイライトさせて説明を吹き出しで表示することが出来るBootstrapベースのライブラリ。 サイトで何をやったらいいか分からない、というユーザ向けの分かりやすいチュートリアルをBootstrapベースのサイトで実現出来ます ますますBootstrapが便利になりますね 関連エントリ Bootstrapのテーマで良い感じに動くオートサジェスト実装jQueryプラグイン「MagicSuggest」 BootstrapをベースとしたフリーのUIKit「Flat UI」 Goo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA