Как использовать магию прокрутки в React JS - PullRequest
Новая
       15

Как использовать магию прокрутки в React JS

0 голосов
/ 26 августа 2018

У меня есть страница с React js, и я хочу использовать магию прокрутки, чтобы создать анимацию водопада, когда бутылка вращается при прокрутке вниз.

Примерно так: https://cockta.eu/en/#new_look_legendary_taste

но яне могу найти какой-либо документ о том, как использовать магию прокрутки в реагировать на 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>
   );
  }
}

Ответы [ 2 ]

0 голосов
/ 12 июня 2019

Для всех, кто придет сюда, есть порт библиотеки прокрутки магии в реакции: https://www.npmjs.com/package/react-scrollmagic

0 голосов
/ 26 августа 2018

Прежде всего, вы не должны использовать jQuery внутри вашего приложения реакции.Вам также не нужен $(document).ready() внутри вашей функции componentDidMount, потому что, если эта функция получит вызов, документ всегда будет готов.

Я никогда раньше не работал со ScrollMagic, но вот "чистый"up "версия вашего кода, как я бы сделал это" способом реакции ":

Внимание: код не проверен! 

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