Css3+fullpage.js implementing full-screen scrolling effect code

This article is mainly for everyone to introduce the fullpage.js and CSS3 realize full-screen scrolling effect, with a certain reference value, interested in small partners can refer to

First of all say fullpage, it is a jquery plug-in, used to achieve the mouse up and down, it will automatically switch to the previous screen or the next screen, for some big on the effect is really a good plug-in. First, let's show the basics.

A total of four screen content

When the mouse slides up and down each time, it will be a full screen switch.

The first screen is a picture, and the other three screens are made up of three images on the left and two images on the right.

The pictures on the left of the three screens are unfolded in different ways, so it has a more cool effect.
The second screen of the three pictures is when the page appears from the bottom to the top and then out to the correct position.
The three images of the third screen are expanded from left to right in the correct position when the page is displayed.
The three images on screen four are when the page is displayed, from center to side, to the right position.

The first step: Download the jquery and fullpage plugin, the fullpage contains CSS and JS and introduced.

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

Step Two: create elements with HTML:

<p class = "main" > <p class= "section Page1" >  </p> <p Class = "section Page2" > <p class = "list" >    </p>   </p> <p class=" section page3 ">      <p class = "list" >         </p>   </p> <p class= "section page4" > <p class = "Li St ">      </p>   </p></p> <p id =" Audiobox "> <audio id =" Audio "AutoPlay loop src="./music/music.mp 3 "></audio> </p>

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

The third step: the use of Fullpage JS to achieve the background color of each screen, and the use of JS to achieve the music pause playback

1.fullpage, because there are four screens, its color is the same as    $ (". Main"). Fullpage ({sectionscolor: [' #1bbc9b ', ' #1bbc9b ', ' #1bbc9b ', ' #1bbc9b ')    });    2. Control the playback of the audio    var audiobox = document.getElementById (' Audiobox ');    var audio = document.getElementById ("audio");    Audiobox.onclick = function () {    if (audio.paused) {      audio.play ();    }    else    {      audio.pause ();    }  }

Fourth step: using CSS for layout:

<style type= "Text/css" >  *{    margin:0;    padding:0;  } Set the icon for the background music  #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;  }  Let each screen out of the auto-hide  . section{    overflow:hidden;  }  /* Set the first screen picture, because the first screen also has only one picture */  . Page1 img{    width:50%;    margin-left:30%;  } /* contains a CLASS=LIST element block starting from the second screen, setting its distance to the left of */  [Class *= "page"]. list{    margin-left:5%;  }/* The width of the picture on the left is 240px*/  [Class *= "page"]. List img{    width:240px  ;  /* Use the attribute selector to select the background image for all pages */  [Class *= page]. bg{    Position:absolute;    bottom:5%;    right:5%;    width:30%;  }  /* Use the attribute selector to select a text image for all pages */  [Class *= page]. text{    Position:absolute;    top:10%;    right:5%;  }

After the fourth step the basic effect has been completed, but the last point is not to give the four-screen picture to achieve animation effect.

Fifth Step: achieve the animation effect.

1. How to determine which screen is currently scrolling?

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

2. Implementing the first screen animation

The first screen is mainly the fade-in effect of the picture.
Train of thought: Change the opacity attribute, combine the transition to transform the transparency, realize fade in effect;

. Page1 img{    opacity:0;  /* Initial status is full transparent */    * plus vendor prefix, duration is 1.5s*/    -moz-transition:opacity 1.5s;    -webkit-transition:opacity 1.5s;  } /* Triggered when the first page is displayed, the active class is automatically added to the first page  . page1.active img{    opacity:1;  }

3. Implement the second screen animation:

The second screen animation, is the left three pictures on the page display, from the bottom to the top of the slide into the window.
Core idea: Use Transform:translatey and transition to achieve;
Transition is the detection of property value changes
Translatey panning

/* The finish time of the animation is 1s, and the initial position of three pictures is moved down to 1000 pixels, that is, out of the screen. * *  . Page2. List img{    transition:1s;    Transform:translatey (1000px);  } /* When the second screen is triggered, the picture returns to its original location *  /. page2.active. List img{    transform:translatey (0px);  } /* Use structured pseudo-classes to find each picture and set the delay, in order to make the animation more flexible *  /. 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. Implementing the third screen animation

With Translatey then the third screen is to move to the left and right, there is bound to be Translatex control horizontal direction. First, the initial state allows three images to overlap on the leftmost side, when the animation is triggered in turn, followed by the example of the second screen, it is easy to write '

. page. List img{/Set animation duration is 1s, animation starts with delay 0.5s/transition:1s 0.5s;}

Since the position of the initial state of the two pictures on this screen is superimposed on the leftmost picture, the Translatex of the two images are set separately.

. page. List Img:nth-child (2) {/move left 250px exactly with first overlap/Transform:translatex ( -250px);}. Page. List Img:nth-child (3) {/move left 500px exactly with first overlap/Transform:translatex ( -500px);} /Set the animation at the time of triggering, so that all IMG homing/. page3.active. List img{Transform:translatex (0px);}

5. Set the animation for the five screen.

The five-screen animation is the left side of the three images overlap in the middle of the picture, triggered after the return.
①. Using Tanslatex in accordance with the above ideas can be achieved;

. page4. List img{    transition:1s 0.5s;  }  /* Set the initial position of the first and third positions in the middle position */  . Page4. List Img:nth-child (1) {    Transform:translatex (250px);  }  . Page4. List Img:nth-child (3) {    Transform:translatex ( -250px);  }/* when triggered.  page4.active. List img{    Transform:translatex (0px);  }

②. In addition to the CSS3 transition and transform properties, you can also take advantage of CSS3 animations: keyframes

. page4.active. List Img:nth-child (1) {    Transform:translatex (0px);    -webkit-animation: ' flymove1 ' 1s ease-in 1;  /* Animation name, duration, finer-grained animation, repetition */  }  . 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);}   }

About the parameters of the keyframes, you can check the manual, familiar with it.

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

Attach Source code:

<! DOCTYPE Html>
"Recommended"

1. Free CSS Online video tutorial

2. CSS Online Manual

3. php.cn Lonely Nine-base (2)-css video tutorial