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

今流行りのフルスクリーン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明けから色々精力的に活動してきた疲れと、近頃の気温差のおかげで体調を崩した。。。明日は在宅勤務にしよう。