Space_Explore

space_explore.jsx

import { useEffect, useState } from "react"
import WorksLayout from "../../components/WorkLayout"
import swipedetect from "../../components/swipe"

import "./space-explore.scss"
import "bootstrap/dist/css/bootstrap.min.css"

const SpaceExplore = () => {
	const [passed, setPassed] = useState(false)
	const [step, setStep] = useState(0)
	const [fire, setFire] = useState(true)
  const [together, setTogether] = useState(false)
  const [moveRight, setMoveRight] = useState(false)

	useEffect(() => {
		if (step === 0) {
			setBodyOverflow("hidden");
		}
		swipedetect(document.getElementsByTagName("body")[0], function(
			evt,
			swipedir
		) {
			if (swipedir === "up") {
				scrollHandler({ deltaY: -1 });
			} else if (swipedir === "down") {
				scrollHandler({ deltaY: 1 });
			}
		});
		window.addEventListener("wheel", fire ? scrollHandler : () => {});
		return () => {
			window.removeEventListener("wheel", scrollHandler);
		};
	});

	const setBodyOverflow = val => {
		document.getElementsByTagName("body")[0].style.overflow = val;
	};

	const scrollHandler = event => {
		setFire(false);
		setTimeout(() => {
			setFire(true);
		}, 1500);
		if (event.deltaY < 0) {
			if (step > 0) {
        setMoveRight(false)
				setStep(step => step - 1);
				setTogether(false);
				window.scrollTo({
          top: 0,
          left: 0,
          behavior: 'smooth'
        });
				if (passed && step === 1) {
					setPassed(false);
					setBodyOverflow("hidden");
				}
			}
		} else if (event.deltaY > 0) {
			if (step < 3) {
				setStep(step => step + 1);
				setPassed(true);
				if (step === 1) {
          setMoveRight(true)
					setBodyOverflow("auto");
					setTogether(true);
					window.scrollTo({
            top: 1000,
            left: 0,
            behavior: 'smooth'
          });
				}
			}
		}
	};
	return (
		<WorksLayout title="Space Explore | KP">
			<div id="section-1" className="parallax-container">
				<div className="images-container">
					<div className={`background-3 ${passed ? "scale" : ""}`}></div>
					<div className={`background-1 ${passed ? "scale" : ""}`}></div>
					<div className={`background-2 ${passed ? "scale" : ""}`}></div>
					<div className={`text-block ${moveRight ? 'flow-right' : passed ? "scale" : ""}`}>
						<p className="main">EXPLORE</p>
						<p className="sub">THE SPACE</p>
					</div>
				</div>
			</div>
			<div id="section-2" className="planets-container">
				<div id="bringTogether" className="h-100 planets-centered row">
					<div className={`h-100 neptune col-6 ${together ? "together" : ""}`}>
						<div id="section2" className="h-100 neptune-bg">
							<p>Neptune</p>
							<img
								src="/spaceExplore/neptune.png"
								className="h-100 invisible"
								alt=""
							/>
						</div>
					</div>
					<div className="col-6 h-100 right-planets">
						<div className={`jupiter ${together ? "together" : ""}`}>
							<div className="h-100 jupiter-bg">
								<p>Jupiter</p>
								<img
									src="/spaceExplore/jupiter.png"
									className="h-100 invisible"
									alt=""
								/>
							</div>
						</div>
						<div className={`saturn ${together ? "together" : ""}`}>
							<div className="h-100 saturn-bg">
								<p>Saturn</p>
								<img
									src="/spaceExplore/saturn.png"
									className="h-100 invisible"
									alt=""
								/>
							</div>
						</div>
					</div>
				</div>
			</div>
		</WorksLayout>
	);
};

export default SpaceExplore;

space_explore.scss

@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
@import "../../public/assets/variables.scss";
.background-const {
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

.dummy-div {
    position: relative;
    height: 2px;
    width: 100%;
}

.parallax-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .images-container {
        height: 101vh;
        overflow: hidden;
        .background-1 {
            background: url("/spaceExplore/background1.png");
            transform: scale(1.4);
            transition: transform 1.5s ease;
            @extend .background-const;
            &.scale {
                transform: scale(1);
            }
        }
        .background-2 {
            background: url("/spaceExplore/background2.png");
            transition: transform 1.5s ease;
            @extend .background-const;
            &.scale {
                transform: scale(1.4);
            }
        }
        .background-3 {
            background: url("/spaceExplore/background3.png");
            transition: transform 1.5s ease;
            z-index: 1;
            @extend .background-const;
            &.scale {
                transform: scale(1.4);
            }
            // &:hover {
            //     transform: scale(1.4);
            //     &~.background-1 {
            //         transform: scale(1);
            //     }
            //     &~.background-2 {
            //         transform: scale(1.4);
            //     }
            //     &~.text-block {
            //         transform: translateY(0);
            //     }
            // }
        }
        .text-block {
            position: absolute;
            text-align: center;
            top: 0;
            right: 0;
            height: 100vh;
            margin-top: 150px;
            padding-right: 100px;
            transform: translate(0, 100%);
            transition: transform 1.5s ease;
            &.flow-right {
                transform: translate(100%, 0);
            }
            p {
                color: $white;
                margin-bottom: 0;
                &.main {
                    font-size: 6vw;
                    font-family: "Poppins", sans-serif;
                    line-height: 1.5;
                }
                &.sub {
                    font-size: 4.5vw;
                    font-family: "Poppins", sans-serif;
                    line-height: 1.5;
                }
            }
            &.scale {
                transform: translate(0, 0);
            }
        }
    }
}

.planets-container {
    position: relative;
    height: 100vh;
    padding: 100px 200px;
    * {
        color: $white;
    }
    .planets-centered {
        // position: absolute;
        // top: 50%;
        // left: 50%;
        // transform: translate(-50%, -50%);
        // overflow: hidden;
        .right-planets {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .neptune {
            transform: translateX(-20%) scale(0.6);
            transition: transform 1s ease;
            p {
                position: absolute;
                bottom: 10px;
                left: 20px;
                font-size: 19px;
                font-family: "Poppins", sans-serif;
            }
            &.together {
                transform: translateX(0) scale(1);
            }
            .neptune-bg {
                position: relative;
                background: url("/spaceExplore/neptune.png");
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                max-width: 600px;
                max-height: 700px;
                border-radius: 25px;
            }
        }
        .saturn {
            height: 48%;
            transform: translate(20%, 10%) scale(0.6);
            transition: transform 1s ease;
            p {
                position: absolute;
                bottom: 10px;
                left: 20px;
                font-size: 19px;
                font-family: "Poppins", sans-serif;
            }
            &.together {
                transform: translate(0, 0) scale(1);
            }
            .saturn-bg {
                position: relative;
                background: url("/spaceExplore/saturn.png");
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                max-width: 600px;
                max-height: 700px;
                border-radius: 25px;
            }
        }
        .jupiter {
            height: 48%;
            transform: translate(20%, -10%) scale(0.6);
            transition: transform 1s ease;
            p {
                position: absolute;
                bottom: 10px;
                left: 20px;
                font-size: 19px;
                font-family: "Poppins", sans-serif;
            }
            &.together {
                transform: translate(0, 0) scale(1);
            }
            .jupiter-bg {
                position: relative;
                background: url("/spaceExplore/jupiter.png");
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                max-width: 600px;
                max-height: 700px;
                border-radius: 25px;
            }
        }
    }
}