如何在 React JS 中使用 Scroll 魔法

Question

我有一个带有 React js 的页面，我想使用滚动魔法制作瀑布动画，当您向下滚动时，瓶子会旋转。

像这样：https://cockta.eu/en/#new_look_legendary_taste

但是我找不到任何关于如何在 react js 中使用滚动魔法的文档，我能找到的最多的是像我一样不起作用的人的例子。

这是我的代码，但没有任何反应。 请帮帮我，我不知道如何推进这个

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

Answer 1

首先，你不应该在你的 react 应用中使用 jQuery。您也不需要在 componentDidMount 函数中使用 $(document).ready()，因为如果调用此函数，文档将始终准备就绪。

我以前从未使用过 ScrollMagic，但这是您代码的“清理”版本，就像我会以“反应方式”那样做：

注意：代码未经测试！

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

Answer 2

对于其他来到这里的人，有一个滚动魔术库的端口在 react：https://www.npmjs.com/package/react-scrollmagic