【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>
);
}