最近綺麗な画像を活用したフルスクリーンレイアウトのwebサイトが増えていますね! 私も最近、フルスクリーンレイアウトを実装することがあったのでその話をします。 今回は背景画像が全画面に表示され、コンテンツが縦横中央に配置されるだけのシンプルなレイアウトです。 Demo: https://codepen.io/omaemi/full/rWgBGW/ ".box" が画面フルサイズの要素で、".box" 直下の要素を縦横中央に配置します。 <div class="page"> <div class="box"> // 画面フルサイズの要素 // 中央寄せされるコンテンツ <p> LOREM IPSUM DOLOR SIT AMET,... <p> </div> <div class="box"> </div> . . 手順は以下の3つです。 画面サイズいっぱいの要素 ".box" を作る ".
img要素ではなく背景画像(background-image)を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御(開始/停止/リセット) ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く