BLOG ブログ

> ブログ

こんにちは!WEBデザイナーのこたです。
今回ご紹介する内容はjQueryのプラグイン「One Page Scroll」になります。
昔ポートフォリオを作成した際に使用したプラグインです。
簡単かつオシャレな動きになるので、初心者の方でもオシャレなサイトの動きがつけられます。

過去のポートフォリオはこちら(One Page Scroll使用)
過去のポートフォリオ

デモページ

See the Pen
mdRzyyq
by こた@WEBデザイナー (@kota_webdesign)
on CodePen.

ダウンロード方法


公式サイト

githubによるダウンロード

【Download on GitHub】をクリックして、GitHubのページを開きます。
すると以下のような画面が出るので、のDownload ZIPをクリック。

ダウンロード後にzipファイルを展開して、以下2ファイルをアップロードします。

  • jquery.onepage-scroll.min.js
  • onepage-scroll.css

head内に読み込む

One Page Scroll カスタマイズ

sectionContainer “section” divなどに変更できます。その場合は”section”部分を”div”へ。
easing “ease”, “linear”, “ease-in”, “ease-out”, “ease-in-out” スクロールする際のイージングを変更できます。
animationTime 1000 スクロールのアニメーションの時間を設定できます。1000で1秒です。
pagination trueかfalse ページネーションの表示の有無。
updateURL trueかfalse ページをスクロールした際にURLも変更するかどうか設定できます。
loop trueかfalse 最下のページをスクロールでトップページへループさせるかどうか。
keyboard trueかfalse キーボード操作可能にするかどうか。

HTML

まとめ

WEBサイトの見た目もかっこよくするかつ、c1ページずつふわっとスクロールするページを簡単に作成することができます。
遊び心があるので作成する側も見る側も楽しくなりますね。
良かったら導入してみてくださいね!