[jQuery]フルスクリーンデザインの実装

未分類

2023.02.242023.05.13

フルスクリーンページデザインをjQuryのプラグイン「fullpage.js」を使用して実装。

WordPressで作ったHPとランディングページのデザインを大幅に改良しようと思いフルスクリーンデザインの実装をしてみました。

[個人的なメモ]

WordPress本体はstore(EC-CUBE)内にインストールされているので注意。

ランディングページ用に全体のテーマをWP-THEME-LINK(子テーマ)に設定してあり、

マルチテーマのプラグインを使用し「ドメイン.com」をWP-THEME(親テーマ)に設定。

(こうすることでlink.ドメイン.comのサブドメインにアクセスすると子テーマが表示され、他の通常ドメインのページは親テーマが表示される。

なぜサブドメインを優先的にThemeをあｔ)

今までのページは「page-スラッグ.php」でウェブデザインを保存する。

まずfullpage.jsのjsファイルとcssファイルをCDNで読み込ませます。

ver3以上は有料とのことなので2verの中で一番新しい2.9.7を使用します。

▼<head>内にcss

▼フッターにスクリプト

▼フッターにスクリプト追加

jQuery(function () {

jQuery(‘#fullpage’).fullpage({

scrollOverflow:true,

navigation:true,

navigationPosition: ‘right’,

});

▼HTMLを記述

　　　　<div id="fullpage">
            <div class="section">
                <div class="slide slide01">
                    <h1>text1</h1>
                </div>
            </div>
            <div class="section">
                <div class="slide slide02">
                    <h2>text2</h2>

                </div>
            </div>
            <div class="section">
                <div class="slide slide03">
                    <div class="text-box">
                      <h2>text3</h2>
                    </div>
                </div>
            </div>
        </div>

参考➀(CDN用リンク)：https://cdnjs.com/libraries/fullPage.js/2.9.7

参考➁：https://web-den.com/fullpage-js