ファーストビューで印象付けたいそんな時に

2019.12.11

こんにちは。主にコーディングを担当している平林です。

主にサイト制作にあたって、実際に触って使って便利だったなーとかそういった情報をお届けできればと思っています。

広告配信やweb解析も扱っているのでそれらも後々出していこうと思います。

そんな第一回目の情報は、タイトルの通り、webサイトはファーストビューはとても重要で中身を見てもらえるかどうかに直結します。
そんな目を引くwebサイトを簡単に導入できるプラグインのご紹介です。

fullPage.js

TOPページにも採用させて頂いたパララックス系プラグインです。

何が便利ってもう導入がとっても簡単。

まずは、CDNでパパッと必要なファイルを記述。

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.css" rel="stylesheet">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.8/fullpage.js"></script>

続いてコンテンツは以下な感じで。

<div id="fullpage">
    <section class="section">1つめコンテンツ</section>
    <section class="section">2つめコンテンツ</section>
    <section class="section">3つめコンテンツ</section>
    <section class="section">4つめコンテンツ</section>
</div>

あとは初期設定のスクリプトを記述したら・・・

$(document).ready(function(){
    $('#fullpage').fullpage();
}

はいこれで簡単パララックス風サイトの出来上がり。
あとは必要に応じてドキュメントを見ながらオプション設定。英語が読めなくてもなんとかなります。

ちょっと他とは違う印象を持たせたいサイトなんかにはとてもいいですね。
逆にかっちりしたサイトには少し合わないかもしれないです。

最初はもっとhtmlの話やcssの話にしようか迷ったのですが、せっかく弊社のサイトで実例があるのでご紹介をしてみました。

こんな形でコーディングのあれこれを配信していきたいと思っている平林でした。