2

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/

3
  • 2
    The example has a data- prop, i.e. data-depth, not dataDepth Commented Jan 1, 2021 at 23:19
  • 1
    Idk, I have literally since yesterday trying to fix it and this solved it 😂!, u can put it as answer to mark as correct!, I was using dataDepth cause the documentation that the autor post on github says dataDepth, thanks! Commented Jan 1, 2021 at 23:25
  • @Jesús thank you for sharing your code. it really helped me Commented Feb 2, 2022 at 13:44

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.