読者です 読者をやめる 読者になる 読者になる

Noise of Web Programming

主にHTML/CSS/JavaScriptやWebサービスの情報を配信しています。可能な限り実装方法まで書いていくつもりです。

ブログを移転しました。

Tecuration.com

このサイト同様、HTML/CSS/JavaScriptなどのフロントサイドWeb開発に関する最新情報やライフハックを配信しています。

流行りのフルスクリーンWebデザインを簡単に実装できる「windows」

Javascript ライブラリ

今流行りのフルスクリーンWebデザインを簡単に実装するJSライブラリをご紹介。

windows


最近のWebデザインの流れとしてヘッダやサイドバー、フッタなどを配置せず、フルスクリーンで見せるデザインが増えてきている。例えば以下の記事が参考になる。

クリエイティブな業種に活用したい、フルスクリーンWebデザイン30個まとめ


そんなフルスクリーンWebデザインのサイトを簡単に実装できるのがwindowsだ。こんな感じで画面の途中で止めると、より多く表示されているほうに自動スライドする機能つき。この場合オレンジのapiのほうに画面がスライドする。

スライド前:


スライド後:


実装方法


実装は簡単!まずheadタグ内で以下を読み込む。

<script src="jquery.min.js"></script>
<script src="jquery.windows.js"></script>
<link rel="stylesheet" href="main.css">


bodyタグ内では作りたいページ数分、マークアップ。以下では3ページ分。テキストは特に入力していない。

<section id="1" class="window"></section>
<section id="2" class="window"></section>
<section id="3" class="window"></section>

JSは以下の通りコーディング。"snapping"が画面の自動スクロールのtrue or false。trueのときsnapSpeedでスクロール速度が、snapIntervalで何秒後にスクロールを始めるか設定できる。

$('.window').windows({
  snapping: true,
  snapSpeed: 500,
  snapInterval: 1100,
  onScroll: function(scrollPos){
  },
  onSnapComplete: function($el){
  },
  onWindowEnter: function($el){
  }
});


フルスクリーンWebデザインは流行っているので使ってみたい人も多いはず。僕も一度は使ってみたいな~。ぜひ参考にどうぞ。


編集後記:
GW明けから色々精力的に活動してきた疲れと、近頃の気温差のおかげで体調を崩した。。。明日は在宅勤務にしよう。

広告を非表示にする