Beliefire UNITED DESIGNERS
[ビリーファイア ユナイテッド デザイナーズ]

Beliefire UNITED DESIGNERS

SPIKE WORKBOOK

pagePiling.js

  • #Parallax
  • #jQuery

セクションごとにフルスクリーンでコンテンツを表示させる縦長スクロールページを作るjQeryプラグイン「pagePiling.js」を紹介します。

pagepiling.png

デモページ

設置は超簡単!
ダウンロードしたデータの「examples」の中から使用したい動きの物を選んで「id="section○○"」内を修正するだけですね!

このプラグインを使用してのホームページ制作でしたらかなり低価格で制作が可能です!
動作パターンの見本は以下です。

01.ノーマルパターン
戻るボタンで前のコンテンツに戻ります。スマホでもスムーズに動作しました!

02.Horizontal Scroll
横スクロールバージョン。アパレルのシーズンカタログコンテンツとかで使っても良さそうですね~。

03.No anchors(#)
ノーマルパターンの戻るボタンで前のコンテンツに戻らないやつです。
これが一番使えそうですかね~。

04.Looping
03のエンドレスループパターン。

05.Full backgrounds
背景画像を画面一杯に表示させれます。

06.Full background video
背景にムービーを画面一杯に表示できます。ムービーはmp4等で設置です。
カフェのホームページとかで提案したいですね~。

07.Callbacks
これは、、正直意味がわからないです。。パンくず的な意味かな?

って感じです!