Jesús
Jesús

Reputation: 467

React doesn't recognize Parallax.js

I am trying to install https://github.com/wagerfield/parallax/, I already read the documentation, and I got a sample of how to use it in javascript, I am going to use it in React, so, with that sample and the documentation for react I think my code should works, but it doesnt!, the console print this error:

Warning: React does not recognize the `dataDepth` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `datadepth` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

This is the sample that I read for the example:

https://github.com/wagerfield/parallax/blob/master/examples/pages/simple.html

And this is the example of how to use parallax.js in react:

https://github.com/wagerfield/parallax/issues/167

This is my actual code of jsx:

import React, {useEffect, useRef} from 'react';
// @ts-ignore
import Parallax from 'parallax-js';
import BackgroundIMG from '../assets/img/background.jpg';
import Guitar from '../assets/img/guitar.png';
import Layer1 from '../assets/img/layer1.png';
import Layer2 from '../assets/img/layer2.png';
import Layer3 from '../assets/img/layer3.png';
import Layer4 from '../assets/img/layer4.png';
import Layer5 from '../assets/img/layer5.png';
import Layer6 from '../assets/img/layer6.png';
import './styles/Home.css';

const Home = () => {
  const sceneEl = useRef(null);

  useEffect(() => {
    const parallaxInstance = new Parallax(sceneEl.current, {
      relativeInput: true,
    })
    
    parallaxInstance.enable();

    return () => parallaxInstance.disable();

  }, [])

  return (
    <div id="container">
      <div id="scene" ref={sceneEl}>
        <div dataDepth="1.00"><img src={Layer1} /></div>
        <div dataDepth="0.80"><img src={Layer2} /></div>
        <div dataDepth="0.60"><img src={Layer3} /></div>
        <div dataDepth="0.40"><img src={Layer4} /></div>
        <div dataDepth="0.20"><img src={Layer5} /></div>
        <div dataDepth="0.00"><img src={Layer6} /></div>
      </div>
    </div>
  )
}

export default Home;

My browser show me this! Browser

But it doesnt have the parallax effect.

This is where u can see a demo of what I am talking about.

http://matthew.wagerfield.com/parallax/

Upvotes: 2

Views: 694

Answers (0)

Related Questions