YoutubeやVimeo、Vineなどのembedをレスポンシブにする非依存の軽量スクリプト・「superembed.js」
superembed.jsはYoutubeやVimeo、Vine等の動画共有サービスのembedをレスポンシブWebデザインに対応する為のスクリプトです。CSSで動画要素を包括して、といった作業の必要もなく、他ライブラリへの依存も無く、現状なら圧縮版で1.6kbと非常に軽量なスクリプトですので扱いやすいかと思います。コードは非常にシンプルなので対応サービスを増やしたい場合でもすぐ分かるかと思います。また、iframe要素には自動でsuperembed-forceというclassが付与されますので必要に応じて利用出来ます。スクリプトを読みこめば即RWD対応出来るのは魅力かなと思います。 superembed.js
jQueryでレスポンシブ対応のフリックスライダー（サムネイル付き）をシンプルに作る方法｜BLACKFLAG
先日ここでレスポンシブ対応のスライドショーの試作品として 「jQueryでレスポンシブ対応のサムネイル付きクロスフェードスライドショーを作る方法 」と題して jQueryを使ってのレスポンシブ対応のサムネイル付きクロスフェードスライドショーを 紹介しましたが、操作面に関してフリック操作には対応していなかったので、 メイン部分にフリック動作を追加してみたパターンを試しに作ってみたので紹介してみます。 レスポンシブ動作部分はブラウザ枠を目いっぱいで表示するタイプなので まずは別枠表示で動作サンプルから。。 jQueryでレスポンシブ対応のフリックスライダー（サムネイル付き）をシンプルに作る方法 サンプルでは6枚の画像を自動でスライド切り替えしています。 メインビジュアル部分をフリックすることで左右に移動させることができ 下に並べてあるサムネイルをクリックすることでも メインビジュアル部分を切り
Google画像検索の様なUIを実装する実験（レスポンシブ対応） | BlackFlag
Googleさんの画像検索で使われているサムネイルをクリックすると すぐ下にアコーディオン形式で詳細エリアが広がるUI。 このUI動作を実装するには「SuperBox」というjQueryプラグイン等が有名だったりしますが 画面仕様等ちょっと理想と違う構成のところがあったり動作が少し重かったりしたので 実験がてらjQueryを使ってGoogle画像検索のUIを試しに作ってみたので紹介してみたいと思います。 レスポンシブ動作などブラウザ枠を目いっぱいで表示するタイプなので まずは別枠表示で動作サンプルから。。 jQueryでGoogle画像検索の様なUIを実装する実験（レスポンシブ対応） サンプルでは25枚の画像を一覧で並べて ウィンドウサイズに合わせて、 １行に並べられる画像数等がリキッドレイアウトされます。 サムネイルをクリックすると すぐ下に詳細エリアが展開されます。 詳細エリアにはNE
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
