[英]How do I use Rellax.js with React?
I am trying to use Rellax.js with React but am not able to understand how to use it.我正在尝试将 Relax.js 与 React 一起使用,但无法理解如何使用它。 All I can find is https://www.npmjs.com/package/rellax#target-node .
我只能找到https://www.npmjs.com/package/rellax#target-node 。 In that link, they give this code.
在那个链接中,他们给出了这个代码。
<div ref={ref => { this.rellaxRef = ref }}>
I’m that default chill speed of "-2"
</div>
var rellax = new Rellax(this.rellaxRef)
How do I use that code with React hooks and what would the entire component look like.我如何使用带有 React 钩子的代码以及整个组件的外观。 This is a very narrow view of the component.
这是组件的一个非常狭窄的视图。
You can use it something like this WITH HOOKS :你可以用这样的东西WITH HOOKS :
import React, { useRef, useEffect } from "react";
import Rellax from "rellax";
export default function App() {
const rellaxRef = useRef();
useEffect(() => {
new Rellax(".animate", { // <---- Via class name
speed: -10,
center: false,
wrapper: null,
round: true,
vertical: true,
horizontal: false
});
new Rellax(rellaxRef.current, { // <---- Via useRef element
speed: -10,
center: false,
wrapper: null,
round: true,
vertical: true,
horizontal: false
});
}, []);
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<div ref={rellaxRef}>
Lorem Ipsum is simply dummy text of the printing and typesetting
</div>
<div className="animate">I’m that default chill speed of "-2"</div>
</div>
);
}
WORKING DEMO (you can scroll and check) WORKING DEMO (您可以滚动查看)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.