Full screen scrolling plugin fullPage.js

An easy to create a full screen scrolling site js scrolling animation library, compatibility irreplaceable

Results the following

The installation

    npm install fullpage.js
Copy the code

use

<link rel="stylesheet" type="text/css" href="fullpage.css"/ > <! The following lines are optional. Only when using option CSS3:falseAnd is necessary if you want to use other easing effects than Linear, Swing, or Easy in OutCubic. --><script src="vendors/easings.min.js"></script><! -- The following line only uses the option scrollOverflow:trueIs necessary in the case of --><script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage.js"></script>
Copy the code

It’s in the page you want to use

var fullPageInstance = new fullpage('#myFullpage', {
    navigation: true.sectionsColor: ['pink'.'red'.'green'.'grey']});Copy the code

Used in React

<div id="myFullpage">
  <div className="section">First page</div>
  <div className="section">Second page</div>
  <div className="section">Third page</div>
  <div className="section">Fourth Page</div>
</div>


componentDidMount() {
  let fullPageInstance = new fullpage('#myFullpage', {
    navigation: true.// This is the little dot on the right
    sectionsColor: ['pink'.'red'.'green'.'grey']}); }Copy the code

If you want to make a page the default page, just add the Active class to it, for example

<div class="section active">Some section</div>.

React-fullpage is recommended in React

The installation

npm install @fullpage/react-fullpage
Copy the code

Using whole is similar to fullpage, and this is a wrapper for it

import React, {Component} from 'react';
import ReactFullpage from '@fullpage/react-fullpage';

class Test extends Component {
  render() {
    return (
      <ReactFullpage// All the above parameter Settings are written here, not in the constructornavigation={true}
        sectionsColor={sectionsColor:['pink', 'red', 'green', 'grey']}

        render={({state, fullpageApi}) = > {
          return (
            <ReactFullpage.Wrapper>
                  <div className="section">First page</div>
                  <div className="section">Second page</div>
                  <div className="section">Third page</div>
                  <div className="section">Fourth Page</div>
            </ReactFullpage.Wrapper>); }} / >); }}export default Test;
Copy the code

NanoID

To create a record unique key, use either a self-incrementing ID or a UUID. A JavaScript library NanoID for creating unique ids is recommended. NanoID creates an alphanumeric ID, usually smaller than a UUID. It is one of the smallest libraries for creating secure and unique ids, and can itself be shrunk and compressed to just 108 bytes.

const { nanoid } = require("nanoid");

const key = nanoid();
console.log(key); // U6XRwZsfcDuexQqwea5qdy
Copy the code

html2canvas

Powerful browser screenshot tool

Lottie

A library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON using Bodymovin and renders them on mobile devices and the Web

Anime

A JavaScript animation library that can handle CSS properties, single CSS transformations, SVG or any DOM properties and JavaScript objects

Axios

Front-end must-have! A Promise-based HTTP library that can be used to make HTTP requests on Node.js and browsers, supporting all modern browsers, even IE8+

axios
    .get("/getstu")
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

Copy the code