[jQuery]フルスクリーンデザインの実装
2月 23, 2023フルスクリーンページデザインを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
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css" />
▼フッターにスクリプト
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.extensions.min.js""></script>
▼フッターにスクリプト追加
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
0 コメント