CSS3+fullPage.js implements full-screen scrolling effect code

This article mainly introduces fullPage.js and CSS3 to achieve the full-screen scrolling effect in detail. It has a certain reference value. Interested friends can refer to it

First of all Let’s talk about fullpage. It is a jquery plug-in. It is used to realize that when the mouse slides up and down, it will automatically switch to the previous screen or the next screen. It is indeed a good way to achieve some high-end effects. Very good plugin. First, show the basic renderings.

There are four screens in total

##Every time the mouse slides up and down, the entire screen will switch.

The first screen uses one picture, and the other three screens are composed of three pictures on the left and two pictures on the right.

The pictures on the left side of these three screens are expanded in different ways, so they have a cooler effect.

The three pictures on the second screen come out to the correct position from bottom to top when the page is displayed.
The three pictures on the third screen are expanded to the correct position from left to right when the page is displayed.
The three pictures on the fourth screen are expanded from the middle to both sides to the correct position when the page is displayed.

Step one:Download jquery and fullpage plug-ins. Fullpage contains css and js and imports them.

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

Second step: Use html to create good elements:

<p class = "main">

  <p class="section page1">
    <img  src="/static/imghw/default1.png"  data-src="./images/page1.png"  class="lazy"   alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
  </p>
  <p class="section page2">
    <p class = "list">
      <img  src = "./images/page2_1.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page2_2.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page2_3.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
    </p>
      <img  class = "text" src = "./images/page2_4.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  class = "bg" src = "./images/page2_5.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >

  </p>
   <p class="section page3">
    <p class = "list">
      <img  src = "./images/page3_1.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page3_2.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page3_3.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
    </p>
    <img  class = "text" src = "./images/page3_4.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  class = "bg" src = "./images/page3_5.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
  </p>

    <p class="section page4">
    <p class = "list">
      <img  src = "./images/page4_1.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page4_2.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page4_3.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
    </p>
      <img  class = "text" src = "./images/page4_4.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  class = "bg" src = "./images/page4_5.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
  </p>

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

Contains four screens of content and an audio element for playing music.

The third step: Use the js of fullpage to realize the background color of each screen, and use the js to realize the pause play of the music

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

The fourth step: Use css for layout:

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

After passing the fourth step, the basic effect has been completed, but the last point is that the

animation effect has not been achieved for the four-screen pictures.

Step 5:Achieve animation effects.

1. How to determine which screen is currently scrolled to?

Because fullpage will add an active class to the current page, you can use the class to determine when the animation is triggered on the current page.

2. Realize the animation of the first screen

The first screen is mainly the fade-in effect of the picture.

Idea: Change the transparency by changing the opacity attribute and combining it with transition to achieve the fade-in effect;

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

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

3. Implement the animation of the second screen:

The animation of the second screen is that the three pictures on the left slide into the window from bottom to top when the page is displayed.

Core idea: Use trans
form:translateY and transition to implement; Transition is to detect attribute value changes
translateY translation

/*动画的完成时间为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. Implementation The animation of the third screen

With translateY, the third screen moves left and right, and there must be translateX to control the horizontal direction. First, the initial state allows the three pictures to overlap on the far left. When the animation is triggered, they are spread out in sequence. Following the example of the second screen, it is easy to write out.

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

Because the initial state of the two pictures on this screen The position must be superimposed on the leftmost picture, so set their translateX

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

#5 for these two pictures. Set the animation of the fifth screen.

The animation on the fifth screen is that the three pictures on the left overlap the middle picture first, and then return to the original position after being triggered.

①. It can be achieved by using tanslateX according to the above idea;

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

②. In addition to the transition and transform properties of css3, you can also use css3 animation:

keyframes

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

To learn about the parameters of keyframes, you can check the manual and become familiar with it.

With the above code, a cool full-screen scrolling page is completed!

Source code attached:

<!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 implements full-screen scrolling effect code" >
  </p>
  <p class="section page2">
    <p class = "list">
      <img  src = "./images/page2_1.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page2_2.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page2_3.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
    </p>

      <img  class = "text" src = "./images/page2_4.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  class = "bg" src = "./images/page2_5.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >

  </p>
   <p class="section page3">
    <p class = "list">
      <img  src = "./images/page3_1.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page3_2.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page3_3.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
    </p>
    <img  class = "text" src = "./images/page3_4.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  class = "bg" src = "./images/page3_5.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
  </p>

    <p class="section page4">
    <p class = "list">
      <img  src = "./images/page4_1.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page4_2.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  src = "./images/page4_3.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
    </p>
      <img  class = "text" src = "./images/page4_4.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
      <img  class = "bg" src = "./images/page4_5.png" alt="CSS3+fullPage.js implements full-screen scrolling effect code" >
  </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>

[Related recommendations]

1.

Free css online video tutorial

2.

css Online Manual

3.

php.cn Dugu Jiujian (2)-css video tutorial

The above is the detailed content of CSS3+fullPage.js implements full-screen scrolling effect code. For more information, please follow other related articles on the PHP Chinese website!