Parallax effect not working at all

[ergunpp]

Hi, I am using the plugin with gatsbyjs and react. The image displays fine but the parallax effect is not working, the image is just static.

My code is below:

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'
import { Parallax } from 'react-parallax';

const insideStyles = {
  padding: 20,
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%,-50%)",
  color: "#ffffff"
};

const Teaser = () =>(
    <StaticQuery

    query={graphql`
      query {
        images: allFile(filter:{relativePath:{eq: "chef.jpg"}}) {
          edges {
              node {
                extension
                relativePath
                childImageSharp {
                  fluid {
                    ...GatsbyImageSharpFluid
                  }
                }
        }
      }
      }
      }
    `}

    render = {({images}) =>(

        <div>
                {/* -----basic config-----*/}

                <Parallax
                    blur={0}

                    bgImage={images.edges[0].node.childImageSharp.fluid.src}
                    bgImageAlt="Chef"
                    strength={500}

                >

                    <div style={{height:345}}>
                      <div className="text-center" style={insideStyles}>
                      <h1>Taze balık ve et ürünleri ile hazırlanmış tam <span className="color style-3">20 </span>farklı lezzet</h1></div>
                    </div>
                </Parallax>
        </div>
   )
    }

    />

    )

export default Teaser

Appreciate if you could point me in the right direction. Thanks in advance everybody!

[rrutsche]

Hi, I just tried your code without the StaticQuery wrapper and it looks as expected. Can you create a CodeSandbox example page that is showing the wrong behavior? You can use this page as base: https://codesandbox.io/embed/r0yEkozrw. This would help a lot. Thanks

[romangorelik]

I had an issue with it as well. It doesn't work on my app but it works in the sandbox environment. Does it have to do with different React versions? I am on 16.4

import React from 'react'

/* Components */
import Navbar from './Navbar.jsx'
import Description from './welcomepage/Description.jsx'
import { Parallax } from 'react-parallax';

const img = 'https://images.unsplash.com/photo-1517646331032-9e8563c520a1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2775&q=80'
const img2 = 'https://images.unsplash.com/photo-1517299321609-52687d1bc55a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80'
const insideStyles = {
  background: "white",
  padding: 20,
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%,-50%)"
};

class WelcomePage extends React.Component {
  state = {

  }
  render () {
    return (
      <div>
        <Navbar/>
        <div className='main'>
          <Parallax blur={{ min: -1, max: 3 }} bgImage={img} strength={300}>
              <div style={{ height: '700px' }} />
              <div style={insideStyles}><Description/></div>
          </Parallax>
          <Parallax blur={{ min: -15, max: 15 }} bgImage={img2} strength={300}>
              <div style={{ height: '700px' }} />
              <div style={insideStyles}><Description/></div>
          </Parallax>
        </div>
      </div>
    )
  }
}

export default WelcomePage

This component is being directly linked to on the opening page via React Router. I am not sure what is causing the issue.

[rrutsche]

@romangorelik Hm, it should work with other react versions. I just pasted your snippet into the code sandbox and gave it the latest react and react-dom versions and it looked okay. Do you have a running example where I can have a look at?

[ergunpp]

Hi, I have a running example you can look at: http://chefs-test.s3-website.eu-central-1.amazonaws.com/

[rrutsche]

Hi, I'm late but: please provide a running example where I can see implementation details. It does not help a lot when I see a page that loads bundled js files. Maybe you already fixed this (or use a different library) but next time it would help a lot. I will close this issue but feel free to re-open it if the issue still exists. Thanks

[galilmori]

@rrutsche I have realized that if you hide the overflow in the "html" or "body" tag and set it to auto on the parent div of the parallax , the parallax wont work. It is sometimes necessary to do such css so it might be a good idea to "liberate" the parallax from the "body" "html" tags and give us an alternative to use a ref?

[galilmori]

here is the sandbox: https://codesandbox.io/s/sharp-matsumoto-zdsgd?file=/app.css