menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/03/20
  • JQuery

ポートフォリオなどで使える。かっこいいオーバーレイグリッド

背景にスマートフォン画像などを表示して画面部分に複数の画像を切り替え表示するJQuery「App Showcase with Grid Overlay」を紹介します。
appshowcase

使用方法

ダウンロード

App Showcase with Grid Overlay

準備するファイル

・jquery.js


・appshowcase.js


・component.css

外部ファイルの読み込み

head内へ以下を追加

bodyの最後の部分へ追加

HTML

「ac-device」で初期画像を設定「ac-grid」に変更画像リストを設定します。

背景画像やサイズを変更する場合は「component.css」を編集する必要があります。
WEBデザインやモバイルAPPのポートフォリオなどに使えそうですね。

コメントを残す

メールアドレスが公開されることはありません。




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11