1. 程式人生 > >【React】在React專案中使用parallax.js

【React】在React專案中使用parallax.js

parallax.js簡單的,輕量級的的視差引擎,能夠對智慧裝置的方向作出反應;通過NPM方式安裝parallax需要以下

1. 安裝parallax

npm install --save https://github.com/wagerfield/parallax


    如果是windows環境安裝時會產生rm不內部名稱的問題,可以通過開啟git bash here命令視窗進行安裝該包,安裝方式和命令提示符下一樣。

2. 使用parallax

     在需要使用parallax的js中引用

     import Parallax from 'parallax-js';

     export default class headBanner extends React.Component {
         componentDidMount() {
             let hi = document.getElementById("headerImage");
             new Parallax(hi);
      }

     render() {
        return (
            <div className="header_banner">
                <div className="slides" id="headerImage">
                 <div data-depth="0.00">
                   <img src="../../../assets/images/headerimage1.jpg"/>
                  </div>
                </div>
           </div>
        );
    }