滑動到可視區域出現動畫 WOW.js + Animate.css 數字統計動畫插件Countup.js

import React, {Component} from 'react'; import "animate.css"; import { Helmet } from 'react-helmet'; import './home.scss'; import { Modal, Button } from 'antd'; import ReactWOW from 'react-wow'; import { Row, Col } from 'react-bootstrap'; import { AppContainer } from "./components"; import Carousel from "./Carousel"; import Dropdown from 'react-bootstrap/Dropdown'; import DropdownButton from 'react-bootstrap/DropdownButton'; import FooterNav from './components/FooterNav' import HttpUtils from '../../utils/HttpUtils' import WOW from 'wowjs'; export default class Home extends Component { constructor(props) { super(props) this.state ={ } } componentDidMount() { new WOW.WOW().init(); } render() {return ( <div>
        <div className={'test1'} />

        <div className={'test2'} />
        <div className={'test3'}>
          <section className="wow slideInUp" data-wow-offset="100" data-wow-duration="0s" data-wow-delay="0.5s">關於我們</section>
          <section className="wow slideInUp" data-wow-offset="100" >關於我們</section>
        </div>
        <div className={'test4'}>
          <section className="wow slideInUp" data-wow-offset="100" >關於我們</section>
          <section className="wow slideInUp" data-wow-offset="100" >關於我們</section>
          <section className="wow slideInUp" data-wow-offset="100" >關於我們</section></div>
      </div> ) } } .test1,.test2,.test3,.test4{ height: 1000px; background-color: rgba(122,122,122,.5); }

wow.js offset失效問題：

//body, html {
//  overflow-x: hidden;
//}

需要注意的點：

1.給每個塊加 overflow:hidden ，裁剪外面的動畫，不顯得詭異。

2.

常用動畫  :

• rubberBand
• slideInUp
• slideInDown
• bounceInUp
• shake
• tada

3.滾動到一定高度以后觸發點擊事件

1.監聽頁面滾動事件

 componentDidMount() { window.addEventListener('scroll', this.handleScroll); }

2.編寫滾動事件代碼

this.state={ 　　start:true } handleScroll = (event) => { console.log(document.documentElement.scrollTop) //滾動條高度
  let clientHeight = document.documentElement.clientHeight; //可視區域高度
  let scrollTop = document.documentElement.scrollTop;  //滾動條滾動高度
  let scrollHeight = document.documentElement.scrollHeight; //滾動內容高度
  if (this.state.start && scrollTop > 2150) { setTimeout(() => { this.setState({start: false}) this.scroll1(); this.scroll2(); this.scroll3(); this.scroll4(); }, 100) } if (scrollTop <= 2020) { this.setState({start: true}) } };

3.使用count.js組件 把start事件綁定到自己設置的函數上

  <CountUp start={0} end={item.value} duration={2.75} separator=" " decimals={0} decimal=","
                            // prefix="EUR " // suffix=" left"
                            onEnd={() => console.log('Ended! 👏')} onStart={() => console.log('Started! 💨')} > {({ countUpRef, start }) => ( <div> { this.scroll1 = start } <span ref={countUpRef} />
                                <span onClick={start}>萬+</span>
                              </div> )} </CountUp>

4.隨意設置一個滾動函數，用來綁定Count.js中的start事件

scroll1 = () => {
  this.setState({start: true})
};
scroll2 = () => {
  this.setState({start: true})
};
scroll3 = () => {
  this.setState({start: true})
};
scroll4 = () => {
  this.setState({start: true})
};