rrutsche / react-parallax Goto Github PK

This will allow users to be to rely on more complex css features on div while the img in back will allow for SEO and serve as a fallback.

Great lib btw

Getting the following console warning when using this package in the latest version of NextJS:

Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

I can validate bgStyle is working (by adding a margin to the background image for example), however trying to use backgroundPosition fails to have any effect.

I have a large image and trying to centre it and have tried "center center", "50% 50%", etc. with many variations and the image never shifts.

Hello ! Here is a suggestion about blurring image when scrolling
I think this effect offers the better UX for users :-)
the effect is like this demo : http://codepen.io/sallar/pen/lobfp

Instead of setting constant blur value in setImagePosition()

if (this.props.blur) {
    this.img.style.WebkitFilter = 'blur(' + this.props.blur + 'px)';
    this.img.style.filter = 'blur(' + this.props.blur + 'px)';
}

I suggest that you can do something like this

if (top > this.prevTop) // just detect user is scrolling top or down (or you can do it in more clever way)
    (this.blur >= 0 ) ? this.blur -= 1 * 0.05 : this.blur; // use 0.05 to prevent blurring too quick
else
    (this.blur <= this.props.maxBlurValue ) ? this.blur += 1 * 0.05 : this.blur;

this.prevTop = top; // save current top value for the next use
this.img.style.WebkitFilter = 'blur(' + this.blur + 'px)';
this.img.style.filter = 'blur(' + this.blur + 'px)';

Thanks for your project, this project helps a lot ! :-)

When I use the <Background> component to display my cover image, it appears than the initial css rule transform is transform: 'translate(-50%, 0)' where 0 must be a computed value.

So when i scroll a little bit, the img seem's to be jumping to its correct position according the parallax effect.

It seems the the position is not correctly compute when the component is mount.

For prevent this behavior, I have to hardcoding my default transform style value like this :

<Parallax
    bgStyle={{ transform: 'translate3d(-50%, -35.5482px, 0px)' }}
    strength={400}
    styleName="wrapper"
>
    <Background>
        <img src={this.props.bannerImageUrl} />
    </Background>
</Parallax>

Perhaps add support for srcset? Hoping to get the images to load faster on mobile.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
I'd be happy to help if you think it's worthwhile.

Hi, thanks so much for making this! Works like a charm in Chrome and Safari, the only problem seems to be Firefox - I don't see the scrolling effect happening there.

Thanks for the great component!

I have one issue though.. I have a button on my page with a z-index of 9999. If I add the parralallax component the button disappears. The strange thing is, that the button is quite far away from the visible part of the parallax component. If I put a z-index on div.react-parallax the button becomes visible again and everything looks fine. So I thought, maybe it would be nice to have a zIndex prop for the parallax component? This might be helpful in other cases too.

Adding 2 parallax sections with different images the parallax effect becomes lot less "smooth" than before. When I scroll there is a bit of re-rendering/lagging that makes the scroll behavior not smooth.

I don't know how to provide an example of the problem I'm facing and I hope you'll be able to help me solving it.

Maybe would be nice to implement some of the suggestions here? http://kristerkari.github.io/adventures-in-webkit-land/blog/2013/08/30/fixing-a-parallax-scrolling-website-to-run-in-60-fps/

Can we set an initial position for the image?

like, it start with top=100px... so scroll on 100 to something?

Everything in Parallax compoment are not updating at changing state or receiving new props.
For example:

<Parallax bgImage="goals.jpg" strength={400}>
    <div className="goals">
      {this.props.goals}
   </div>
</Parallax>

On receiving new goals nothing happens.

not sure if it is the link or the demo that is broken at http://rrutsche.github.io/#parallax

Is it possible to add a button to scroll to another section?

I am trying to use this project in one of our latest websites and found that the brightness filter is missing. Feature request: The background image should get darker/lighter while scrolling the page enabling the foreground text appear better. This similar to blur feature except the filter is on brightness with min and max. It would be even great if we can achieve with a custom color with alpha. Please see if any one of the contributors can implement this.

Hi mate,

Thanks for the great component. Just a bit of issue here with the Safari mobile scrolling (<=iPhone 7) seems to be a bit jittery and I can't seem to figure out what is the root cause of the issue.

Please let me know if you have any idea.

Cheers,
quangdng.

Hi,
I am trying to change image every time the tab changes. But sometimes pictures are not initialized to full size and somehow it is set according to height.
Need help

<Parallax strength={400} bgImage={bg} bgwidth={'100%'}>
</Parallax>

i've passed blur prop. My background has no change. are you sure it's working?

npm WARN [email protected] requires a peer of react@^0.14.9 || ^15.3.0-0 but none was installed.
npm WARN [email protected] requires a peer of react-dom@^0.14.9 || ^15.3.0-0 but none was installed.

Get this warning when transitioning to react 16. It still works fine from what I can see.

Execute the command: npm run dev
The following error:

ReferenceError: HTMLDocument is not defined

After upgraded to version 2.1.0
When open on device with disabled parallax, bgStyle props is not working
that why background image is not responsive

"react": "16.5.1",
"react-dom": "16.5.1",
"react-parallax": "2.1.0",

When on small width screens many images show a white space before entering the parallax wrapper. Might be an idea to calculate extra width needed (on resize) so that there will always be enough height to work with.

If I try this (0.4.5)

 <Parallax bgImage={image} strength={400} bgHeight='200px'/>

I get nothing. If I add content it stays just big enough to accommodate.

Do not to list react under dependencies in your package.json. This is why we have peerDependencies.

I get this error when using when using React 15.3.2.

While having no children in the parallax element you get this error:
Uncaught TypeError: Cannot read property 'children' of undefined

Can the parallaxes be set to be side by side and to be moved from left to right(& viceversa) on clicks(/ horizontal scroll)?

When I resize the view, the image don't resize, it just move from left to right.
Is there a way to archive the following effect?: http://santander-universidades.herokuapp.com/santander_universidades_que_es.html

In the following page, try to resize the page and see how the red banner moves.

Thanks.

It'd be really nice to have static types, at least for the core features of the library.

Now the use of the PropTypes from the react packages is deprecated. React points the use of the prop-types package:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

Thanks in advance!

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!

This would be nice :-) probably almost nothing to change in the code except version number.

Hi

Is there a way to adjust the CSS styles that are used inline when the component renders? The default values are causing considerable clipping in my image file, and I can't seem to find a way to adjust it via any other means. For example, the left value has been set as 50% but I see that if I set it to 40% (using the DevTools in Chrome), the image renders almost the way I want it to.

Thanks!

I wanted to add a class to the background image, but didn't want to use the Background component, since using API should be faster and cleaner.

Example:

    render() {
        const { background, title, style, prSetting } = this.props;
        return (
            <section style={{ marginTop: -23 }}>
                <Parallax bgImage={background} {...prSetting} bgClassName="hidden-print">
                    <div className="container" style={style}>
                        <h3 style={{ color: "white" }}>{title}</h3>
                    </div>
                </Parallax>
            </section>
        );
    }

Just because i wanted to remove the background image, now it's removes all of the component.

Bug

I have a simple controlled <input> as a child of a <Parallax>. The state update for the input is broken.

Characters have to be entered twice and the only the previous ones appear (i.e. it's late by one entry). And if the new character is the same as the previous one, it behaves even more weirdly.

import React, { useState } from 'react'
import { Parallax } from 'react-parallax'

function App() {
  const [val, setVal] = useState('')

  return (
    <Parallax>
      <input value={val} onChange={e => setVal(e.target.value)} />
    </Parallax>
  )
}

I'm using the v3.0.0.

This line is reported to be throwing errors on Mobile Safari (v9, v10 & v11):
TypeError: null is not an object (evaluating 'this.content.getBoundingClientRect')

Our error logs suggest it's happening during unmount (during route transition). I'm guessing updatePosition is being called during/after componentWillUnmount. A quick solution would be to bail if this.content is falsy.

If download react-parallax and react from CDN "ReferenceError: react is not defined" appears
webpack.config.js

externals: {
    "react": "React",
    "react-dom": "ReactDOM",
    "prop-types": "PropTypes",
    "react-parallax" : "react-parallax"
  },

The background image does not take the full width after initial load. I have to scroll down a bit to update the component and get full width.

This is a dirty work around we had to make. Maybe there's a better way or a fix.

componentDidMount() {
    // TODO this is a dirty little workaround for fixing the "width-problem"
    setTimeout(this.parallax.updatePosition, 500)
  }
 render() {
    return (
        <Parallax
          ref={(ref) => this.parallax = ref }
          bgImage={this.props.bgImage}
          strength={200}
          blur={0}
        >
          <div>...</div>
     </Parallax>
   )
}

Is there a prop or other setting that enables reverse parallax? The reason for this is to create the impression of a tree growing. By showing (roughly):

• the top 2/3 of my image when the parallax component is fully visible in the browser but positioned at the bottom
• the bottom 2/3 of my image when the parallax component is fully visible in the browser but positioned at the top of the screen

The tree in my image will appear to grow upwards as you scroll down past it. With a positive strength value the scrolls is in the wrong direction and the top of the image is shown for more time as I scroll, not less. Negative strength values distort the image and don't work.

When i initialy load the page everything works as expected. But when i go to a new page using react-router-dom an error occurs in the console:

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
    at index.js:230
    at HTMLDocument.n.onScroll (index.js:233)

the code where the error occurs (7. line):

if (n.canUseDOM) {
            var e = Date.now();
            e - n.timestamp >= 10 && function (e) {
              var t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0,
                  n = arguments.length > 2 ? arguments[2] : void 0;
              if (!n) return !1;
              var o = e.getBoundingClientRect().top - t, // right here
                  r = e.getBoundingClientRect().bottom + t;
              return o <= d(n) && r >= 0;
            }(n.node, 100, n.canUseDOM) && (window.requestAnimationFrame(n.updatePosition), n.timestamp = e);
          }

I guess the error has something to do with the Parallax widget getting disposed.

Hi, could you add an property with which you can define an alt text?

@rrutsche Can we update this package to use React 15.0.1 ? After upgrading React, i am getting this error.

addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component\'s render method, or you have multiple copies of React loaded.

Link

Hi there,

First, great work I really like this package.

In one of my projects, the Parallax component lives inside a div with a vertical overflow scroll. However, because the Parallax component attaches the 'scroll' event handler to the window, there is no parallax effect as I scroll the div.

I've created a dirty fix by adding a parentNode prop and attaching the DOM event handlers to it instead of the window. (philbot9@888c0b1)

Then it's used like this:

<Parallax parentNode={document.querySelector('#scrollable-div')}> ...

Would you be open to (properly) implementing a 'parentNode' prop?

Hi,

Please take a look here. This line of code adds onload event listener to image, which is setting Parallax component state. But when component unmounts (f.e. when changing route) listener is not detached, which causes error:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the t component.

I can't make the dynamic works as expected.

When:

• {min: 0, max: 100} or {min:100, max:100}, the image is always blurred;
• {min: -100, max:100}, {min: 0, max:-100}, {min: -100, max:0}, the images doesn't blur;
• {min: 100, max:-100}: the images is blurred but as I scroll the blur is dynamically removed

React:

<Parallax strength={600} bgImage={banner}>
        <section className="banner" id="home">
          <div className="background filter" />
          <div className="container">
            <h3>TEXT</h3>
            <h1>TEXT</h1>
            <h2>TEXT</h2>
          </div>
        </section>
      </Parallax>

SASS:

section {
  min-height: 100vh;
  padding: 100px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .background {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: none;
    &.filter {
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: #000;
        opacity: 0.25;
      }
    }
  }
  .container {
    width: 100%;
    max-width: 1440px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}

I've been having an issue with the custom background element. I'll try to explain the best I can.

It seems that when you set a custom background element the y coordinate position is off by -158px making the image appear to be cut off and pushed to the top of the frame.

translate3d(-50%, -158px, 0px) always seems to start at -158 at strength 300 no matter the size of the image, but I think it should start at 0px or something lesser than that.

I've included an image to show what I'm talking about https://s3.amazonaws.com/chrisdobler/Screen+Shot+2016-09-12+at+2.37.48+PM.png

I have it set up like this:

            <Parallax strength={300}>
              <Background>
                <img src="http://www.fillmurray.com/400/300"/>
              </Background>
              <Rectangle aspectRatio={[16, 6]}></Rectangle>
            </Parallax>

This issue still persists.

The more you scroll, the more white space appears from the top.

Example markup:

<div className={styles.wrapper}>
    <Parallax
        bgImage={Hero}
        strength={800}
        className={styles.parallaxBg}
        bgHeight{"100%"}
        bgWidth={"100%"} 
    />
</div>

CSS

.wrapper {
    width: 100%;
    height: 100vh;
    min-height: 780px;
}

Is it possible to use the effect if I don't use a background image but just the content of a component?

I have a flexbox with two elements at 50% width each, one is a div with text content (dynamic height) and the other is the parallax image. I have configured it so that the parallax container will be the same height as the text content. I have applied a flex-grow style to the parallax container which works fine, but the image size is based on the content (.react-parallax-content) size, which doesn't scale. If I manually put a 100% height style on the content div and scroll, the image resizes correctly. Without this though, the image doesn't size correctly and you get white space at the bottom.

Would it be possible to add a prop which allows us to apply either a custom class or style to the content element? That way we can set the height to 100% if required.

I've created a demo for reference here: https://71k4znj1lx.codesandbox.io/

doubling window height makes parallax strength twice lower

I would expect background image to be entirely visible when you scroll through the page (which would adjust strength dynamicly based on window height/width ratio, or would just calculate percentage differently)

right now is strength is too high, you never see entire image,
if strength is too low, you get white gaps
but even if you calculate perfect strength to see entire image without white gaps, you loose it on different window proportion