[英]How use Scroll magic in React JS
I have a page with React js and I want use scroll magic to make a waterfall animation where a bottle rotates when you scroll down. 我有一个带有React js的页面,我想使用滚动魔术来制作瀑布动画,当你向下滚动时,瓶子会旋转。
Like this: https://cockta.eu/en/#new_look_legendary_taste 像这样: https : //cockta.eu/en/#new_look_legendary_taste
but I can not find any doc of how to use scroll magic in react js, the most I could find was the example of someone who, like me, does not work. 但我找不到任何关于如何在反应js中使用滚动魔法的文档,我能找到的最多的是像我这样的人不能工作的例子。
This is my code but nothing happens. 这是我的代码但没有任何反应。 Please help me, I do not know how to advance in this
请帮帮我,我不知道如何推进这个
import React, { Component } from 'react';
import logo from './logo.svg';
import ScrollMagic from 'scrollmagic';
import $ from 'jquery';
import './App.css';
class App extends Component {
componentDidMount() { // wait for document ready
var controller;
$(document).ready(function($) {
// init controller
var controller = new ScrollMagic.Controller();
});
$(document).ready(function($) {
function updateBox (e) {
if (e.type == "enter") {
("#pin p").text("Pinned.") ;
} else {
("#pin p").text("Unpinned.");
}
}
// build scenes
new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150})
.setPin("#pin")
.setClassToggle("#pin", "green")
.on("enter leave", updateBox)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 300})
.setPin("#pin")
.setClassToggle("#pin", "green")
.on("enter leave", updateBox)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 600})
.setPin("#pin")
.setClassToggle("#pin", "green")
.on("enter leave", updateBox)
.addIndicators() // add indicators (requires plugin)
.addTo(controller);
});
// init controller
// show pin state
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<div className="spacer s1"></div>
<div id="trigger" className="spacer s1"></div>
<div className="spacer s0"></div>
<div id="pin" className="box1 red">
<p>Unpinned.</p>
<a href="#" className="viewsource">view source</a>
</div>
<div className="spacer s2"></div>
</div>
);
}
}
First of all, you should not use jQuery inside your react app. 首先,你不应该在你的反应应用程序中使用jQuery。 You also don't need the
$(document).ready()
inside your componentDidMount
function, because if this function get call, the document will always be ready. 你也不需要在
componentDidMount
函数中使用$(document).ready()
,因为如果这个函数被调用,文档将始终准备就绪。
I never worked with ScrollMagic before, but here is a "clean up" version of your code like I would do it "the react way": 我之前从未使用过ScrollMagic,但这里是你的代码的“清理”版本,就像我会做的那样“反应方式”:
Attention: Code is not tested!
注意:代码未经过测试!
import React, { Component } from 'react';
import logo from './logo.svg';
import ScrollMagic from 'scrollmagic';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.controller = new ScrollMagic.Controller();
this.state = {
pinText: 'Unpinned.'
};
}
componentDidMount() {
// build scenes
new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150})
.setPin("#pin")
.setClassToggle("#pin", "green")
.on("enter leave", this.updateBox)
.addIndicators() // add indicators (requires plugin)
.addTo(this.controller);
new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 300})
.setPin("#pin")
.setClassToggle("#pin", "green")
.on("enter leave", this.updateBox)
.addIndicators() // add indicators (requires plugin)
.addTo(this.controller);
new ScrollMagic.Scene({triggerElement: "#trigger", duration: 150, offset: 600})
.setPin("#pin")
.setClassToggle("#pin", "green")
.on("enter leave", this.updateBox)
.addIndicators() // add indicators (requires plugin)
.addTo(this.controller);
}
updateBox = (e) => {
let newPinText = '';
if (e.type === "enter") {
newPinText = 'Pinned.';
}else {
newPinText = 'Unpinned.';
}
this.setState({ pinText: newPinText });
};
render() {
const { pinText } = this.state;
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<div className="spacer s1" />
<div id="trigger" className="spacer s1" />
<div className="spacer s0" />
<div id="pin" className="box1 red">
<p>{pinText}</p>
<a href="#" className="viewsource">view source</a>
</div>
<div className="spacer s2" />
</div>
);
}
}
对于任何来到这里的人来说,还有一个滚动魔术库的端口: https : //www.npmjs.com/package/react-scrollmagic
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.