HTML、CSS、jQuery: 美しい全画面スクロール効果を構築する

HTML、CSS、jQuery: 美しい全画面スクロール効果を構築する

現代の Web デザインでは、全画面スクロール効果は非常に人気があり、魅力的なものになっています。デザイン要素。この特別な効果により、Web ページはスクロールを通じて視覚的にインパクトのあるトランジション効果を提示し、ユーザーによりインタラクティブでスムーズなエクスペリエンスを提供します。この記事では、HTML、CSS、jQuery を使用して美しい全画面スクロール効果を構築する方法を簡単に紹介し、具体的なコード例を示します。

まず、ページのコンテンツを保持するための基本的な HTML 構造を作成する必要があります。簡単な例を次に示します。

<div id="fullpage">
  <div class="section">
    <h1>第一部分</h1>
    <p>这是第一部分的内容。</p>
  </div>
  <div class="section">
    <h1>第二部分</h1>
    <p>这是第二部分的内容。</p>
  </div>
  <div class="section">
    <h1>第三部分</h1>
    <p>这是第三部分的内容。</p>
  </div>
</div>

上の例では、fullpage という名前の div 要素を作成し、section## という名前の 3 つのサブ要素をネストしました。 #、各サブ要素はページのセクションを表します。

html, body {
  margin: 0;
  padding: 0;
}

#fullpage {
  position: relative;
  width: 100%;
  height: 100vh;
}

.section {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

margin と padding を 0 に設定して、コンテンツがページを完全に埋めるようにしています。画面が表示されます。また、ビューポート全体を埋めるように、fullpage 要素の幅を 100%、高さを 100vh に設定します。

section 要素は相対位置に設定され、幅と高さは両方とも 100% に設定されます。また、flex レイアウトを使用してコンテンツを垂直方向と水平方向の中央に配置し、スクロール時に余分なコンテンツを非表示にするために overflow プロパティを hidden に設定します。

$(document).ready(function() {
  $('#fullpage').fullpage({
    navigation: true,
    navigationTooltips: ['第一部分', '第二部分', '第三部分'],
    anchors: ['section1', 'section2', 'section3'],
    sectionsColor: ['#f1c40f', '#3498db', '#e74c3c'],
    responsiveHeight: 500
  });
});

fullpage 要素をセレクターとして FullPage.js に渡し、いくつかの構成オプションを使用してナビゲーション バー、タイトル、アンカー、背景色などの設定を定義します。

以上がHTML、CSS、jQuery: 美しい全画面スクロール効果を構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。