React-Spring - проблема параллакса, включающая навигацию и нижний колонтитул из-за ограничений по высоте - PullRequest
Новая
       93

React-Spring - проблема параллакса, включающая навигацию и нижний колонтитул из-за ограничений по высоте

0 голосов
/ 22 февраля 2020

Я использую параллакс из реактивной пружины для создания эффекта параллакса. Я понимаю, что может использовать высоту своего родителя, чтобы установить его площадь. Это решение, однако, вызывает странное поведение при прокрутке, оставляя и видимым на экране. У меня есть несколько вопросов здесь:

  1. Как я могу настроить этот макет так, чтобы он вел себя нормально?
  2. Нужно ли размещать и внутри ParallaxComp с фиксированной высотой (Я надеюсь, что есть лучшее решение)?
  3. Есть ли способ сделать предположение о его высоте, основанной на содержании внутри, а не использовать фактор пропеллера?

Спасибо заранее.

Codesandbox

Приложение. js

import React from "react";

import ParallaxComp from "./ParallaxComp";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <nav style={{ height: "5rem", background: "purple", color: "white" }}>
        Nav
      </nav>
      {/* <main style={{ height: "100%" }}> */}
      <main style={{ height: "100vh" }}>
        <ParallaxComp />
      </main>
      <footer style={{ height: "5rem", background: "blue", color: "white" }}>
        Footer
      </footer>
    </div>
  );
}

ParallaxComp. js 

import React from "react";
import { Parallax, ParallaxLayer } from "react-spring/renderprops-addons";

let parallax;

const ParallaxComp = () => {
  return (
    <Parallax pages={2} scrolling={true} vertical ref={ref => (parallax = ref)}>
      <ParallaxLayer
        offset={0}
        speed={0.1}
        style={{
          fontSize: "23.47222vw",
          textAlign: "right",
          textTransform: "uppercase"
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
          <path
            d="M887 0c0 224.45-182.22 406.4-407 406.4S73 224.45 73 0h814z"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#fec70e"
          />
        </svg>
      </ParallaxLayer>
      <ParallaxLayer
        offset={0}
        speed={-0.4}
        style={{
          fontSize: "23.47222vw",
          textAlign: "right",
          textTransform: "uppercase"
        }}
      >
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 948.26 1122.2">
          <path
            d="M216 105.2c0 59.65-48.35 108-108 108S0 164.84 0 105.2h216z"
            fill-rule="evenodd"
            clip-rule="evenodd"
            fill="#037e36"
          />
        </svg>
      </ParallaxLayer>
    </Parallax>
  );
};

export default ParallaxComp;
...