CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt

In diesem Artikel werden hauptsächlich FullPage.js und CSS3 vorgestellt, um einen Vollbild-Scroll-Effekt zu erzielen, der einen gewissen Referenzwert hat.

Zunächst: Lassen Sie uns darüber reden fullpage. Es handelt sich um ein jquery-Plugin. Es wird verwendet, um zu erkennen, dass beim Hoch- oder Runterfahren der Maus automatisch zum vorherigen oder nächsten Bildschirm gewechselt wird Erzielen Sie einige High-End-Effekte. Sehr gutes Plugin. Zeigen Sie zunächst die grundlegenden Renderings.

Insgesamt vier Bildschirme mit Inhalten

Jedes Mal, wenn die Maus nach oben und unten bewegt wird, wechselt der gesamte Bildschirm.

Der erste Bildschirm verwendet ein Bild, und die anderen drei Bildschirme bestehen aus drei Bildern links und zwei Bildern rechts.

Die Bilder auf der linken Seite dieser drei Bildschirme werden auf unterschiedliche Weise vergrößert, sodass sie einen cooleren Effekt haben.
Die drei Bilder auf dem zweiten Bildschirm werden bei der Anzeige der Seite von unten nach oben an der richtigen Position angezeigt.
Die drei Bilder auf dem dritten Bildschirm werden bei der Anzeige der Seite von links nach rechts auf die richtige Position erweitert.
Die drei Bilder auf dem vierten Bildschirm werden bei der Anzeige der Seite von der Mitte nach beiden Seiten an die richtige Position erweitert.

Schritt eins: Laden Sie JQuery- und Fullpage-Plugins herunter und importieren Sie sie.

<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>

Schritt 2: Verwenden Sie HTML, um gute Elemente zu erstellen:

<p class = "main">

  <p class="section page1">
    <img  src="/static/imghw/default1.png"  data-src="./images/page1.png"  class="lazy"   alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
  </p>
  <p class="section page2">
    <p class = "list">
      <img  src = "./images/page2_1.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page2_2.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page2_3.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
    </p>
      <img  class = "text" src = "./images/page2_4.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  class = "bg" src = "./images/page2_5.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >

  </p>
   <p class="section page3">
    <p class = "list">
      <img  src = "./images/page3_1.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page3_2.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page3_3.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
    </p>
    <img  class = "text" src = "./images/page3_4.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  class = "bg" src = "./images/page3_5.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
  </p>

    <p class="section page4">
    <p class = "list">
      <img  src = "./images/page4_1.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page4_2.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page4_3.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
    </p>
      <img  class = "text" src = "./images/page4_4.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  class = "bg" src = "./images/page4_5.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
  </p>

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

enthält vier Bildschirme mit Inhalten und ein Audioelement zum Abspielen von Musik.

Der dritte Schritt: Verwenden Sie die js von fullpage, um die Hintergrundfarbe jedes Bildschirms zu implementieren, und verwenden Sie js, um die Musik anzuhalten

//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();
    }
  }

Der vierte Schritt Schritt: CSS für das Layout verwenden:

<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%;
  }

Nach Abschluss des vierten Schritts ist der grundlegende Effekt abgeschlossen, aber der letzte Punkt ist, dass die Animation nicht implementiert wurde für den Vier-Bildschirm-Effekt.

Schritt 5: Erzielen Sie Animationseffekte.

1. Wie kann festgestellt werden, zu welchem ​​Bildschirm gerade gescrollt wird?

Da fullpage der aktuellen Seite eine aktive Klasse hinzufügt, können Sie die Klasse verwenden, um zu bestimmen, wann die Animation auf der aktuellen Seite ausgelöst wird.

2. Realisieren Sie die Animation des ersten Bildschirms

Der erste Bildschirm dient hauptsächlich dem Einblendeffekt des Bildes.
Idee: Ändern Sie die Transparenz, indem Sie das Deckkraftattribut ändern und es mit dem Übergang kombinieren, um den Einblendeffekt zu erzielen

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

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

3. Implementieren Sie die Animation des zweiten Bildschirms:

Die Animation auf dem zweiten Bildschirm besteht darin, dass die drei Bilder auf der linken Seite von unten nach oben in das Fenster gleiten, wenn die Seite angezeigt wird.
Kernidee: Verwenden Sie transform:translateY und transit, um es zu implementieren;
transition dient dazu, Attributwertänderungen zu erkennen
translateY-Übersetzung

/*动画的完成时间为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;
  }

4 .Realisieren Sie die Animation des dritten Bildschirms

Wenn sich der dritte Bildschirm mit TranslateY nach links und rechts bewegt, muss TranslateX vorhanden sein, um die horizontale Richtung zu steuern. Erstens überlappen sich die drei Bilder ganz links. Nach dem Beispiel des zweiten Bildschirms ist es einfach zu schreiben

Da sich auf diesem Bildschirm zwei Bilder befinden, muss die Position des Anfangszustands dem Bild ganz links überlagert werden. Stellen Sie daher deren TranslateX

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

.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); 
}

für diese beiden Bilder ein. 5. Festlegen die Animation des fünften Bildschirms.

Die Animation auf dem fünften Bildschirm besteht darin, dass die drei Bilder auf der linken Seite zuerst das mittlere Bild überlappen und dann nach dem Auslösen in die ursprüngliche Position zurückkehren.

①. Dies kann durch die Verwendung von tanslateX gemäß der obigen Idee realisiert werden.

② Zusätzlich zu den Übergangs- und Transformationseigenschaften von CSS3 können Sie auch CSS3-Animationen verwenden:

.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);
  }

Schlüssel

Frames

Um mehr über die Parameter von Keyframes zu erfahren, können Sie das Handbuch lesen und sich damit vertraut machen.

.page4.active .list img:nth-child(1){
    transform:translateX(0px);
    -webkit-animation: 'flymove1' 1s ease-in 1;  /*动画名、持续时间、更细粒度动画，重复次数*/
  }

  .page4.active .list img:nth-child(3){
    transform:translateX(0px);
    -webkit-animation: 'flymove2' 1s ease-in 1;
  }

   @-webkit-keyframes flymove1{
    0%{ transform: translateX(250px);}
    100%{ transform: translateX(0px);}
   }

   @-webkit-keyframes flymove2{
    from{ transform: translateX(-250px);}
    to{ transform: translateX(0px);}
   }

Mit dem obigen Code ist eine coole Vollbild-Bildlaufseite fertig!

Angehängter Quellcode:

[Verwandte Empfehlungen]

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
  <title>fullpage 实现全屏滚动</title>
  <script type="text/javascript" src = "./jQuery/jquery-3.2.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="./fullpage/jquery.fullPage.css" rel="external nofollow" rel="external nofollow" >
  <script type="text/javascript" src = "./fullpage/jquery.fullPage.min.js"></script>

  <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 *= "page"] .list{
    margin-left: 5%;
  }

  [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%;
  }

  /*第一屏图片的动画
   思路:通过改变opacity属性，结合transition来改变透明度，实现淡入的效果;
  */
  .page1 img{
    opacity: 0;/*初始状态为全透明*/
    -moz-transition: opacity 1.5s;
    -webkit-transition: opacity 1.5s;
  }

  /*当第一页显示的时候触发*/

  .page1.active img{
    opacity: 1;
  }

  /*第二页的动画
  核心思路 ：使用transform:translateY 和transition配合实现;
  transition是检测属性值变化
  translateY平移
  */

  .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;

  }

  /*设置第三页的动画*/
  .page3 .list img{
    transition: 1s 0.5s;
  }
  .page3 .list img:nth-child(2){
    transform:translateX(-250px);
  }
  .page3 .list img:nth-child(3){
    transform:translateX(-500px);
  }

  .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);
  }*/

  .page4.active .list img:nth-child(1){
    transform:translateX(0px);
    -webkit-animation: &#39;flymove1&#39; 1s ease-in 1; /*动画名、持续时间、更细粒度动画，重复次数*/
  }

  .page4.active .list img:nth-child(3){
    transform:translateX(0px);
    -webkit-animation: &#39;flymove2&#39; 1s ease-in 1;
  }

   @-webkit-keyframes flymove1{
    0%{ transform: translateX(250px);}
    100%{ transform: translateX(0px);}
   }

   @-webkit-keyframes flymove2{
    from{ transform: translateX(-250px);}
    to{ transform: translateX(0px);}
   }

  </style>
</head>
<body>

<p class = "main">

  <p class="section page1">
    <img  src="/static/imghw/default1.png"  data-src="./images/page1.png"  class="lazy"   alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
  </p>
  <p class="section page2">
    <p class = "list">
      <img  src = "./images/page2_1.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page2_2.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page2_3.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
    </p>

      <img  class = "text" src = "./images/page2_4.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  class = "bg" src = "./images/page2_5.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >

  </p>
   <p class="section page3">
    <p class = "list">
      <img  src = "./images/page3_1.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page3_2.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page3_3.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
    </p>
    <img  class = "text" src = "./images/page3_4.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  class = "bg" src = "./images/page3_5.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
  </p>

    <p class="section page4">
    <p class = "list">
      <img  src = "./images/page4_1.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page4_2.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  src = "./images/page4_3.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
    </p>
      <img  class = "text" src = "./images/page4_4.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
      <img  class = "bg" src = "./images/page4_5.png" alt="CSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt" >
  </p>

</p>
 <p id = "audioBox">
    <audio id = "audio" autoplay loop src= "./music/music.mp3"></audio>
  </p>
<script type="text/javascript">
  $(function(){

    //1.fullpage
    $(".main").fullpage({
      sectionsColor: [&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;,&#39;#1bbc9b&#39;]
    });
    //2.控制音频的播放

    var audioBox = document.getElementById(&#39;audioBox&#39;);
    var audio = document.getElementById("audio");

    audioBox.onclick = function(){

    if(audio.paused){
      audio.play();
    }
    else
    {
      audio.pause();
    }
  }
  });
</script>
</body>
</html>

1

Kostenloses CSS-Online-Video-Tutorial

2 .

CSS-Online-Handbuch

3.

php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonCSS3 + fullPage.js implementiert Code für den Vollbild-Bildlaufeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!