FullPage. js and CSS3 implement full screen scrolling, fullpage. jscss3

FullPage. js and CSS3 implement full screen scrolling, fullpage. jscss3

Fullpage is a jquery plug-in that is used to move the mouse up and down and automatically switches to the previous or next screen, it is indeed a good plug-in for some high-performance results. First, the basic information is displayed.

Four screens in total

The entire screen is switched every time the mouse slides up or down.

The first screen uses an image. The other three screens are composed of three pictures on the left and two pictures on the right.

The pictures on the left of these three screens are displayed in different ways, so they have a cool effect.
The three images on the second screen are displayed from bottom to top to the correct position when the page is displayed.
The three images on the third screen expand from left to right to the correct position when the page is displayed.
The three pictures on the fourth screen are displayed in the right position from the center to the two sides.

Step 1:Download the jquery and fullpage plug-ins. The fullpage includes css and js and introduces 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>

Step 2:Use html to create elements:

<div class = "main">  <div class="section page1">      </div>  <div class="section page2">    <div class = "list">                      </div>              </div>   <div class="section page3">    <div class = "list">                      </div>            </div>    <div class="section page4">    <div class = "list">                      </div>              </div></div> <div id = "audioBox">    <audio id = "audio" autoplay loop src= "./music/music.mp3"></audio>  </div>

It contains four screens and an audio element for playing music.

Step 3:Use fullpage js to implement the background color of each screen, and use js to pause playing music.

// 1. fullpage, with four screens, has the same color $ (". main "). fullpage ({sectionsColor: ['# 1bbc9b', '# 1bbc9b', '# 1bbc9b', '# 1bbc9b']}); // 2. control audio playback var audioBox = document. getElementById ('audiobox'); var audio = document. getElementById ("audio"); audioBox. onclick = function () {if (audio. paused) {audio. play ();} else {audio. pause ();}}

Step 4:Use css for layout:

<Style type = "text/css"> * {margin: 0; padding: 0;} // set the background music icon # 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;} // automatically hide any excess of the screen. section {overflow: hidden;}/* sets the first screen image, because the first screen also has only one image */. page1 img {width: 50%; margin-left: 30%;}/* The second screen contains an element block of class = list, set the distance from the left side */[class * = "page"]. list {margin-left: 5%;}/* set the width of the left image to PX */[class * = "page"]. list img {width: 240px;}/* use the attribute selector to select the background image of all pages */[class * = "page"]. bg {position: absolute; bottom: 5%; right: 5%; width: 30%;}/* use the attribute selector, select text images on all pages */[class * = "page"]. text {position: absolute; top: 10%; right: 5% ;}

After step 4, the basic effect has been completed, but the last point is that the animation effect has not been implemented for the four screens.

Step 5:Animation effect.

1. How can I determine which screen is currently scrolled?

Because fullpage adds an active class to the current page, you can use the class to determine that the animation is triggered when the current page is in progress.

2. Implement the animation of the first screen

The first screen is the effect of the image.
Train of Thought: by changing the opacity attribute and combining transition to change transparency, we can achieve a light effect;

. Page1 img {opacity: 0;/* The initial state is completely transparent * // * with the supplier prefix, the duration is 1.5 s */-moz-transition: opacity 1.5 s; -webkit-transition: opacity 1.5 s;}/* triggered when the first page is displayed. When the first page is displayed, the active class is automatically added */. page1.active img {opacity: 1 ;}

3. Implement the animation of the second screen:

The animation on the second screen slides from bottom to top into the window when the three pictures on the left are displayed on the page.
Core Idea: use transform: translateY and transition for implementation;
Transition is used to detect changes in attribute values.
TranslateY Translation

/* The animation completion time is 1 s, and the three images at the initial position are all moved down to 1000 pixels, that is, out of the screen. */. Page2. list img {transition: 1 s; transform: translateY (1000px);}/* when the second screen is triggered, the image returns to its original position */. page2.active. list img {transform: translateY (0px);}/* use a structured pseudo class to locate each image and set the latency, in order to make the animation more flexible */. page2. list img: nth-child (1) {transition-delay: 0.5 s ;}. page2. list img: nth-child (2) {transition-delay: 0.8 s ;}. page2. list img: nth-child (3) {transition-delay: 1 s ;}

4. Implement the animation of the third Screen

With translateY, the third screen is moving to the left and right, and the horizontal direction of translateX is bound to be controlled. First, the initial state allows three images to overlap on the leftmost side. When an animation is triggered, the animation is laid out in sequence. It is easy to write it out in the example of the second screen'

. Page. list img {/set the animation duration to 1 s. The animation starts with a delay of 0.5 s/transition: 1 s 0.5 s ;}

Since the initial status of the two images on the current screen must be superimposed on the leftmost image, set the translateX

. Page. list img: nth-child (2) {/move 250px to the left, just overlapping the first one/transform: translateX (-250px );}. page. list img: nth-child (3) {/move 500px to the left to overlap with the first one./transform: translateX (-500px);}/set the animation at the time of triggering, reset all img /. page3.active. list img {transform: translateX (0px );}

5. Set the animation of the fifth screen.

The animation on the fifth screen is that the three pictures on the left first overlap in the middle of the picture, triggering and returning.
①. TanslateX can be implemented based on the above ideas;

. Page4. list img {transition: 1 s 0.5 s;}/* set the first and third initial positions to the middle position */. page4. list img: nth-child (1) {transform: translateX (250px );}. page4. list img: nth-child (3) {transform: translateX (-250px);}/* reset at trigger */. page4.active. list img {transform: translateX (0px );}

②. Apart from the transition and transform attributes of css3, you can also use CSS 3 Animation: keyframes

. Page4.active. list img: nth-child (1) {transform: translateX (0px);-webkit-animation: 'flymove1' 1 s memory-in 1; /* animation name, duration, finer-grained animation, number of repetitions */}. page4.active. list img: nth-child (3) {transform: translateX (0px);-webkit-animation: 'flymove2' 1 s memory-in 1 ;} @-webkit-keyframes flymove1 {0% {transform: translateX (250px);} 100% {transform: translateX (0px); }}@-webkit-keyframes flymove2 {from {transform: translateX (-250px);} to {transform: translateX (0px );}}

For more information about keyframes parameters, check the manual.

Through the above Code, a cool full-screen scrolling page is complete!

Attached source code:

<! DOCTYPE html> 
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.