jQuery

fullpage.jsで全画面表示&スクロールを実現できます。その方法をご紹介


皆さんこんにちは、mayukouです。fullpage.jsというjQueryプラグインをご存知でしょうか。
一画面ずつwebページ内でスライドするおしゃれな動きをするjQueryです。
タブレットでもスマートフォンでも使えるfullpage.jsが便利だったので、ご紹介します。
同じページで全画面表示し、タブレット等でタップしてスクロールするプラグインです。
今回は、仕事でお店のテイクアウトドリンクのメニュー表に使用致しました。

スポンサードリンク

デモ

まずは動きを確認してみてください♪
fullpage.jsデモ

fullpageの使い方

1.fullpage.jsをダウンロードします。


公式サイトよりfullpage.jsプラグインをダウンロードしましょう。
公式サイトはこちら
ダウンロードしたら、ファイルの中のdistフォルダにある赤で囲った二つのファイルとvendorフォルダにある赤で囲ったファイルをコピーして任意のフォルダにペーストして格納しましょう。

2.任意のページに以下のhtmlコードをコピー&ペーストします

sectionクラスが一つの画面になって切り替わっていきます。各セクションで色を変えるなどすると切り替わっていることがわかりやすくなります。

3.head内に記述

head内に先ほどの3つのファイルとJQueryのファイル(コピペでOK)を読み込みます。

4.スクリプトをコピー&ペースト

bodyタグの直前に以下のスクリプトを読み込みます

以上で基本的なfullpage.jsができます。

最後に

いかがでしたでしょうか。サイトの動きがおしゃれになるのでぜひ、チェックしてみてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Illustrator

    面倒じゃない!簡単なIllustratorでシームレスなパターンの作り方

    みなさんこんにちは、mayukouです。デザインを作る上で、背景がシ…

  2. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

  3. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  4. Web Design

    ブログ作りの参考に♬ジャンル別オススメwordpressテーマを考察してみました

    皆さんは、wordpressのブログを持っていますか?ブログを持ってい…

  5. jQuery

    軽量のスクリプトで簡単に!レスポンシブメニューを実装できるResponsive Nav

    みなさんこんにちは、mayukouです!今回は、うちのブログで結構…

  6. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット

    みなさんこんにちは、mayukouです。最近、webデザインのカンプ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. jQuery

    JQueryで要素を消すスクリプト!ECサイトの注意書きにもオススメ!
  2. Photoshop

    Photoshopでパターンを作ろう!斜めストライプを作る方法とは?
  3. Mac

    自炊するときに、便利!MacアプリCaffeine
  4. Photoshop

    必見!Photoshopでスタンプ風のかすれた表現をする方法まとめ
  5. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法
PAGE TOP