フリーフォント

Penguins

漫勉

まんべん

フリーベクター素材

Tulips

【jQuery】シングルページ・ワンページ・フルページ

2017-09-09

fullpage.js(本家)

http://alvarotrigo.com/fullPage/(本家)

カーテン

One Page Scroll

簡単にパララックス実装可能な軽量スクリプト「skrollr」&コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法としてパララックス(少々今さら感も感じますが・・・)効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ次画面へ遷移するさせる技法がよく見られます。

jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法

『簡単にパララックス実装可能な軽量スクリプト「skrollr」&コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して
1ページをフルスクリーン表示にして、画面全体をスクロールさせることで
1ページ分(1コンテンツ分)を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが
自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。

 

シングルページ・ワンページ・フルページ

 

http://alvarotrigo.com/fullPage/

◎ http://webdesign.tutsplus.com/articles/vertical-and-horizontal-scrolling-with-fullpagejs–cms-24215

◎ http://codepen.io/tutsplus/full/VvZXMP/

◎https://github.com/tutsplus/fullPage.js

◎ http://kana-lier.com/javascript/fullpage-js/

◎http://plugmin.co/396/

◎ http://www.electric-fruits.com/creator-blog/fullpage-js-memo-201507/

◎ http://morobrand.net/mororeco/jquery/fullpage/

◎ http://cly7796.net/wp/javascript/plugin-fullpage/

◎ http://www.webopixel.net/javascript/914.html

◎ http://kana-lier.com/javascript/fullpage-js/

Follow me!