全屏滚动插件fullpage.js

一个可轻易创建全屏滚动网站的js滚动动画库, 兼容性无可替代

效果如下

安装

    npm install fullpage.js

使用

<link rel="stylesheet" type="text/css" href="fullpage.css" />

<!-- 以下行是可选的。 只有在使用选项 css3:false ，并且您希望使用其他缓动效果，而非 linear 、 swing 或 easeInOutCubic 时才有必要。 -->
<script src="vendors/easings.min.js"></script>

<!-- 以下行仅在使用选项 scrollOverflow:true 的情况下是必需的 -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="fullpage.js"></script>

在想要用的页面里面


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

在React中使用

<div id="myFullpage">
  <div className="section">第一个页面</div>
  <div className="section">第二个页面</div>
  <div className="section">第三个页面</div>
  <div className="section">第四个页面</div>
</div>


componentDidMount() {
  let fullPageInstance = new fullpage('#myFullpage', {
    navigation: true, //这是开启右边的小圆点
    sectionsColor:['pink', 'red', 'green', 'grey']
  });
}

如果你想将一个页面设置为默认页，只需要给它添加active类，例如

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

在React中推荐直接使用react-fullpage

安装

npm install @fullpage/react-fullpage

使用整体跟fullpage差不多，这个是针对它的一个封装

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

class Test extends Component {
  render() {
    return (
      <ReactFullpage
        //上面的参数设置都写在这里，不用再写在构造函数里面
        navigation={true}
        sectionsColor={sectionsColor:['pink', 'red', 'green', 'grey']}

        render={({state, fullpageApi}) => {
          return (
            <ReactFullpage.Wrapper>
                  <div className="section">第一个页面</div>
                  <div className="section">第二个页面</div>
                  <div className="section">第三个页面</div>
                  <div className="section">第四个页面</div>
            </ReactFullpage.Wrapper>
          );
        }}
      />
    );
  }
}
export default Test;

NanoID

创建记录唯一的key，一般采用自递增的ID或者采用UUID，这里推荐一个创建唯一ID的JavaScript库 NanoID。NanoID 创建一个由字母数字组成的ID，通常比UUID要小，它是用于创建安全并且唯一ID的最小库之一，本身可以缩小并压缩到仅只有 108 字节。

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

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

html2canvas

强大的浏览器网页截图工具

Lottie

一个用于Android，iOS，Web和Windows的库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备和网络上呈现它们

Anime

一个JavaScript动画库，可以处理CSS属性，单个CSS转换，SVG或任何DOM属性以及JavaScript对象

Axios

前端必备！一个基于 Promise 的 HTTP 库，可用在 Node.js 和浏览器上发起 HTTP 请求，支持所有现代浏览器，甚至包括 IE8+

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

前端开发中常用的js库