CSS3+fullPage.js は全画面スクロール効果コードを実装します

この記事では、全画面スクロール効果を実現するための fullPage.js と CSS3 について詳しく紹介します。興味のある方は参考にしてください。

まず、fullpage について説明します。 jquery このプラグインは、マウスを上下にスライドさせると、自動的に前の画面または次の画面に切り替わることを実現するために使用されます。これは、確かにいくつかのハイエンドエフェクトを作成するための優れたプラグインです。まず、基本的なレンダリングを示します。

コンテンツは全部で4画面あります

マウスを上下にスライドさせるたびに画面全体が切り替わります。

最初の画面は1枚の写真を使用し、他の3つの画面は左側の3枚の写真と右側の2枚の写真で構成されています。

これら 3 つの画面の左側の写真はさまざまな方法で拡大されるため、よりクールな効果があります。

ページが表示されると、2番目の画面の3つの写真が下から上に正しい位置に表示されます。
3番目の画面の3つの画像は、ページが表示されるときに左から右に正しい位置に拡大されます。
4番目の画面の3つの写真は、ページが表示されたときに中央から両側に正しい位置に拡大されます。

ステップ 1: Fullpage には CSS と JS が含まれており、それらをインポートします。

<script type="text/javascript" src = "./jQuery/jquery-3.2.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="./fullpage/jquery.fullPage.css">
<script type="text/javascript" src = "./fullpage/jquery.fullPage.min.js"></script>

2 番目のステップ: HTML で適切な要素を作成する:

<p class = "main">

  <p class="section page1">
    <img  src="./images/page1.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
  </p>
  <p class="section page2">
    <p class = "list">
      <img  src = "./images/page2_1.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
      <img  src = "./images/page2_2.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
      <img  src = "./images/page2_3.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
    </p>
      <img  class = "text" src = "./images/page2_4.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
      <img  class = "bg" src = "./images/page2_5.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >

  </p>
   <p class="section page3">
    <p class = "list">
      <img  src = "./images/page3_1.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
      <img  src = "./images/page3_2.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
      <img  src = "./images/page3_3.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
    </p>
    <img  class = "text" src = "./images/page3_4.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
      <img  class = "bg" src = "./images/page3_5.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
  </p>

    <p class="section page4">
    <p class = "list">
      <img  src = "./images/page4_1.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
      <img  src = "./images/page4_2.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
      <img  src = "./images/page4_3.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
    </p>
      <img  class = "text" src = "./images/page4_4.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
      <img  class = "bg" src = "./images/page4_5.png" alt="CSS3+fullPage.js は全画面スクロール効果コードを実装します" >
  </p>

</p>
 <p id = "audioBox">
    <audio id = "audio" autoplay loop src= "./music/music.mp3"></audio>
  </p>

には、4 つの画面のコンテンツと、音楽を再生するためのオーディオ要素が含まれています。

ステップ 3: fullpage の js を使用して各画面の背景色を実装し、js を使用して音楽を一時停止します

//1.fullpage，由于有四屏，其颜色也一样
    $(".main").fullpage({
sectionsColor: ['#1bbc9b','#1bbc9b','#1bbc9b','#1bbc9b']
    });

    //2.控制音频的播放
    var audioBox = document.getElementById('audioBox');
    var audio = document.getElementById("audio");

    audioBox.onclick = function(){

    if(audio.paused){
      audio.play();
    }
    else
    {
      audio.pause();
    }
  }

ステップ 4: CSS を使用してレイアウト:

<style type="text/css">
  *{
    margin: 0;
    padding:0;
  }

 //设置背景音乐的图标
  #audioBox{
    width: 45px;
    height: 45px;
    position: absolute;
    background: url(./images/music_on.png) no-repeat center;
    border-radius: 22px;
    top: 5%;
    right: 3%;
    cursor: pointer;
  }

  //让每屏超出的都自动隐藏
  .section{
    overflow: hidden;
  }

  /*设置第一屏的图片，因为第一屏也只有一个图片*/
  .page1 img{
    width: 50%;
    margin-left: 30%;
  }

 /*从第二屏开始都包含一个class=list的元素块，设置其距离左侧的距离*/
  [class *= "page"] .list{
    margin-left: 5%;
  }

 /*让左边的图片的宽度都为240px*/
  [class *= "page"] .list img{
    width: 240px;

  }

  /*利用属性选择器，选出所有页的背景图片*/
  [class *= "page"] .bg{
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 30%;
  }

  /*利用属性选择器，选择出所有页的文字图片*/
  [class *= "page"] .text{
    position: absolute;
    top: 10%;
    right: 5%;
  }

4 番目のステップを通過した後の基本的な効果は完成しましたが、最後の点は、4画面の絵に

アニメーション効果が実装されていないことです。

ステップ 5: アニメーション効果を実現します。

1. 現在どの画面にスクロールしているかを確認する方法は?

fullpage は現在のページにアクティブなクラスを追加するため、そのクラスを使用して、現在のページでアニメーションがいつトリガーされるかを決定できます。

2. 最初の画面のアニメーションを実現します

最初の画面は主に画像のフェードイン効果です。

アイデア: 不透明度属性を変更して透明度を変更し、トランジションと組み合わせてフェードイン効果を実現します。

.page1 img{
    opacity: 0;  /*初始状态为全透明*/
    /*加上供应商前缀，持续时间为1.5s*/
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
  }

/*当第一页显示的时候触发,当第一页时就会自动加上active类*/
  .page1.active img{
    opacity: 1;
  }

3. 2 番目の画面のアニメーションを実装します。ページが表示されたら、ウィンドウを下から上にスライドさせます。 中心的なアイデア: trans
form:translateYとtransitionを使用して実装します。

transitionは属性値の変更を検出します

translateY translation
4. 3番目の画面のアニメーションを実現します

画面が左右に移動する場合、水平方向を制御するためにtranslateXが必要です。まず、初期状態では一番左に3枚の絵が重なるようにして、2番目の画面の例に倣って順番に広げていきます。

この画面上の2つの画像の初期位置が大きく異なるので、一番左の画像に重ね合わせて、これら2つの画像にそれぞれtranslateXを設定します

/*动画的完成时间为1s，初始位置三个图片都处于向下移动到1000像素，即移出屏幕外。*/
  .page2 .list img{
    transition:1s;
    transform: translateY(1000px);
  }

 /*当第二屏触发时，图片回到原始位置*/
  .page2.active .list img{
    transform:translateY(0px);
  }

/*利用结构化伪类找到每一个图片并设置延时，为了使动画更灵活*/
  .page2 .list img:nth-child(1){
    transition-delay: 0.5s;
  }
  .page2 .list img:nth-child(2){
    transition-delay: 0.8s;
  }
  .page2 .list img:nth-child(3){
    transition-delay: 1s;
  }

5. 5番目の画面のアニメーションを設定します。

5番目の画面のアニメーションは、左側の3枚の絵が最初に中央の絵に重なって、トリガーされると元の位置に戻るというものです。

① 上記の考え方に従って、tanslateX を使用することで実現できます。

.page .list img{ 
/设置动画持续时间为1s，动画开始时延迟0.5s/ 
transition: 1s 0.5s; 
}

② css3 のアニメーションプロパティを使用することもできます:
keyframes

.page .list img:nth-child(2){ 
/向左移动了250px刚好与第一个重叠/ 
transform:translateX(-250px); 
}

.page .list img:nth-child(3){ 
/向左移动了500px刚好与第一个重叠/ 
transform:translateX(-500px); 
}

/设置触发时的动画，让所有的img归位/ 
.page3.active .list img{ 
transform:translateX(0px); 
}

キーフレームのパラメータについては、マニュアルを確認して慣れてください。

上記のコードで、かっこいい全画面スクロールページが完成しました！

添付されたソースコード:

.page4 .list img{
    transition: 1s 0.5s;
  }
  /*设置第一个和第三个的初始位置处于中间的位置上*/
  .page4 .list img:nth-child(1){
    transform:translateX(250px);
  }
  .page4 .list img:nth-child(3){
    transform:translateX(-250px);
  }
 /*触发时归位*/
  .page4.active .list img{
    transform:translateX(0px);
  }

【関連推奨事項】

1.

無料CSSオンラインビデオチュートリアル

2.

php.cn Dugu Jiijian (2)-cssビデオチュートリアル

以上がCSS3+fullPage.js は全画面スクロール効果コードを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。