fullPage.js

fullPage.jsはフルスクリーンスナップスクロールウェブサイトを簡単に作成できるJavaScriptライブラリです。各セクションが画面サイズに合わせて全画面でスクロールする機能を提供します。

Latest Ver 4.0.35
Homepage
Github
0
35,414
ページをめくるごとに、新しい体験が広がります。
fullPage.jsを使用して、ウェブサイトにスタイリッシュなトランジション効果を加えましょう。
fullPage.jsはウェブページの各セクションをフルスクリーンでスナップスクロールできるライブラリです。
License: GPL-3.0
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.extensions.min.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.min.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/vendors/easings.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/vendors/easings.min.js
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.css
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.min.css
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/fullpage.min.css.map
https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.35/vendors/easings.min.js.map

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。
📄 HTML
<div id='fullpage'>
  <div class='section'>Section 1</div>
  <div class='section'>Section 2</div>
  <div class='section'>Section 3</div>
</div>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>

⚙️ JavaScript
new fullpage('#fullpage', {
  autoScrolling: true,
  navigation: true
});
⚡ Top Tools for Developers
Text Compare

テキスト比較

2つのテキストの違いを一目で確認できます。

Favicon Generator

Faviconジェネレーター

簡単かつ迅速にファビコンを生成します。

Lorem Ipsum Generator

Lorem Ipsumジェネレーター

デザイン用のダミーテキストを生成します。

Character Counter

文字数カウント

文字数と単語数をリアルタイムで確認できます。

SRT ↔ SMI

SRT ↔ SMI変換ツール

字幕形式を簡単に変換できます。

Text Extract(OCR)

画像テキスト抽出

画像内のテキストを自動で抽出します。