Initial position incorrect on small displays

[dob9601]

Trouble With Implementation

When viewing parallax on smaller displays (such as mobile phones) the initial positions of the parallax layers mean that most of them are already off-screen, viewable here: https://gifted-elion-c1f0f2.netlify.app/

Parallax component:

import {ParallaxBanner} from "react-scroll-parallax";

import "./ParallaxMountains.css"

import MountainImage0 from "./ParallaxMountainsImages/0.png";
import MountainImage1 from "./ParallaxMountainsImages/1.png";
import MountainImage2 from "./ParallaxMountainsImages/2.png";
import MountainImage3 from "./ParallaxMountainsImages/3.png";

export function ParallaxMountains() {
    return (
        <>
            <ParallaxBanner
                className="MountainParallax"
                layers={[
                    {children: <h1 className="Header">Title</h1>, speed: -300, className: "HeaderBox"},
                    {image: MountainImage0, speed: -225, className: "Mountain", expanded: false},
                    {image: MountainImage1, speed: -150, className: "Mountain", expanded: false},
                    {image: MountainImage2, speed: -75, className: "Mountain", expanded: false},
                    {image: MountainImage3, speed: 0, className: "Mountain", expanded: false},
                ]}
            />
        </>
    )
}

[jscottsmith]

The reason this looks different on mobile screens is because speed is only an abstraction for setting translateY and each increment of speed by 1 will increase the translate effect by 10px -- but pixels aren't responsive and the value will remain consistent not matter the width of the banner.

Instead try using translateY directly with values as %, for example translateY: [-50%, 50%], this way the effect scales based on the width of the banner.

I can mock it up if it helps.

[dob9601]

Thank you! Managed to get it working based off of this information. I've linked the repository in question to assist any future travellers that head this way: https://github.com/dob9601/dob9601.github.io/ (https://danielobr.ie/) and below is the final code:

import {ParallaxBanner} from "react-scroll-parallax";

import "./ParallaxMountains.css"

import MountainImage0 from "./parallax-mountains-layers/0.png";
import MountainImage1 from "./parallax-mountains-layers/1.png";
import MountainImage2 from "./parallax-mountains-layers/2.png";
import MountainImage3 from "./parallax-mountains-layers/3.png";

export function ParallaxMountains() {
    return (
        <>
            <ParallaxBanner
                className="ParallaxMountains"
                layers={[
                    {children: <h1 className="Header">About Me | Daniel O'Brien</h1>, className: "HeaderBox", translateY: ["-60%", "60%"]},
                    {image: MountainImage0, className: "Mountain", expanded: false, translateY: ["-100%", "100%"]},
                    {image: MountainImage1, className: "Mountain", expanded: false, translateY: ["-80%", "80%"]},
                    {image: MountainImage2, className: "Mountain", expanded: false, translateY: ["-60%", "60%"]},
                    {image: MountainImage3, className: "Mountain", expanded: false},
                ]}
            />
        </>
    )
}

[jscottsmith]

Great thanks. Would you mind if I used your art as an example of this responsive behavior in the documentation?

[dob9601]

Go for it!

[dob9601]

If possible, some level of attribution might be nice - just so that people don't end up thinking I've directly taken the example from the docs :)

[jscottsmith]

absolutely, if I end up using it I will attribute and tag you 🙇🏻