週末はレストランやコンビニのお菓子のことを書いています。この広告は、90日以上更新していないブログに表示しています。フルページスクロールするサイトを簡単につくるjQueryプラグイン今回は、jQueryプラグインの「fullPage.js」について書きます。「fullPage.js」を使うと、フルページスクロールするサイトを簡単に作れます。簡単に言うと、iPhone5sのプロダクトサイトみたいなものが作れます。(スクロールのみ)縦スクロールだけでなく、横スクロールも作れます。タブレットなどにも対応しています。あと、比較的、導入も簡単です。導入方法から書いていきます。1こちらの公式サイトから「fullPage.js」をダウンロードします↓http://alvarotrigo.com/blog/fullpage-jquery-plugin-for-fullscreen-scrolling-websites/githubはコチラダウンロードしたフォルダを解凍すると、中身はこんな感じです。使うのは、「jquery.fullPage.css」、「jquery.easings.min.js」、「jquery.fullPage.min.js」の3つです。「jquery.easings.min.js」は、「vendors」というフォルダにあります。2必要なファイルを読み込みます。$.fn.fullpage();});これで、完了です。サンプルプログラムを書きます。section</div></body></html>実行結果スクロールすると1ページ分が自動でスクロールしているはずです。分かりにくいですが(笑)上のやつは、縦スクロールです。</div></div>では、ここからはオプションについて書きます。fullPage.jsには、たくさんのオプションがあります。ここでは、一部を紹介します。詳しくは、知りたい方は、Githubの方を見てください。背景色の変更は、このようにします。});});「slidesColor」が背景色の変更です。16進数などで変更できます。スクロール速度スクロール速度の変更は「scrollingSpeed」を使います。});});以上で紹介を終わります。詳しくは、Githubで確認して下さい。最後に、オプションを使ったプログラムを書きます。スライド式のメニューを簡単に実装する今回は、jQueryプラグインの「bigSlide.js」について書きます。bxSlider今回は、jQueryプラグインの「bxSlider」について書きます。UIのSliderについて書きます。UIのProgressbarについて書きます。Linkプロフィールid:gupuruプログラミング関連の事を色々書いています(^^)週末はレストランやコンビニのお菓子のことを書いています。