import React, { useState, useEffect } from "react"; import _ from "lodash"; import scroll from "../../../utils/scroll"; import Mobile from "./Mobile"; import qrImage from "../../../assets/images/qrImage.png"; import rightBg from "../../../assets/images/page-bg.png"; import leftBg from "../../../assets/images/page-bg-1.png"; export default function Page2({ list, page, autoPlay }) { const height = window.innerHeight; const [top, setTop] = useState(window.innerHeight); const [scale, setScale] = useState(null); const [videoPosition, setVideoPosition] = useState(null); const [unit, setUnit] = useState(null); const [boxPosition, setBoxPosition] = useState({ translateY: null, translateX: null, rotate: null, }); const [mobilePosition, setMobilePosition] = useState(null); useEffect(() => { // localStorage.removeItem('htmlRect'); // localStorage.removeItem('joiRect'); setMobilePosition( scroll.linearFormula( window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY, -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100), 6, 2 * height, 2.5 * height ) ); setScale( scroll.linearFormula( window.scrollY > height ? height : window.scrollY, 0.8, 1, 0, height ) ); if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) { setVideoPosition( window.scrollY > 4 * height ? scroll.videoLinearFormula(4 * height) : scroll.videoLinearFormula(window.scrollY) ); } unitPositionHandler(window.scrollY); if (window.scrollY < 2.5 * height) { setBoxPosition({ translateY: scroll.linearFormula( window.scrollY > 2 * height ? 2 * height : window.scrollY, -5, 10, height, 2 * height ), translateX: scroll.linearFormula( window.scrollY > 2 * height ? 2 * height : window.scrollY, -5, 32, height, 2 * height ), rotate: scroll.linearFormula( window.scrollY > 2 * height ? 2 * height : window.scrollY, 5, 0, height, 2 * height ), }); } else if (window.scrollY > 3 * height) { setBoxPosition({ ...boxPosition, translateY: scroll.linearFormula( window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY, -30, -30, 2.5 * height, 3 * height ), translateX: scroll.linearFormula( window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY, 32, 32, 2.5 * height, 3 * height ), rotate: scroll.linearFormula( window.scrollY > 2.5 * height ? 2.5 * height : window.scrollY, 0, 0, 2.5 * height, 3 * height ), }); } window.addEventListener("scroll", (e) => { const scrollY = window.scrollY; setTop(scroll.homeScrollHandler(page)); setScale(scaleHandler(scrollY)); boxPositionHandler(scrollY); mobilePositionHandler(scrollY); if (window.scrollY > 2 * height && window.scrollY < 3.5 * height) { unitPositionHandler(scrollY); } if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) { videoPositionHandler(scrollY); } }); }, []); useEffect(() => { // if (boxPosition.translateY < -17) { // } }, [boxPosition]); useEffect(() => { unitPositionHandler(window.scrollY); }, [mobilePosition]); const boxPositionHandler = (scrollY) => { if (scrollY <= height) { setBoxPosition({ translateY: -5, translateX: -5, rotate: 5, }); } if (scrollY > height && scrollY <= 2 * height) { setBoxPosition({ ...boxPosition, translateY: scroll.linearFormula(scrollY, -5, 10, height, 2 * height), translateX: scroll.linearFormula(scrollY, -5, 32, height, 2 * height), rotate: scroll.linearFormula(scrollY, 5, 0, height, 2 * height), }); } if (scrollY > 2.5 * height && scrollY <= 3 * height) { setBoxPosition({ ...boxPosition, translateY: scroll.linearFormula( scrollY, 10, -30, 2.5 * height, 3 * height ), translateX: scroll.linearFormula( scrollY, 32, 32, 2.5 * height, 3 * height ), rotate: scroll.linearFormula(scrollY, 0, 0, 2.5 * height, 3 * height), }); } else { } }; const mobilePositionHandler = (scrollY) => { if (scrollY <= 2 * height) { setMobilePosition( -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100) ); } else if (scrollY > 2 * height && scrollY <= 2.5 * height) { setMobilePosition( scroll.linearFormula( scrollY, -(((window.innerHeight * 10) / 20 / window.innerWidth) * 100), 6, 2 * height, 2.5 * height ) ); } else { setMobilePosition(6); } }; const videoPositionHandler = (scrollY) => { if (scrollY <= 3.5 * height) { setVideoPosition(() => null); } else if (scrollY > 3.5 * height && scrollY < 4 * height) { setVideoPosition(scroll.videoLinearFormula(scrollY)); } else { } }; const unitPositionHandler = (scrollY) => { if (scrollY > 2 * height && scrollY <= 2.5 * height) { if (mobilePosition > 0) { setUnit(2); } else { setUnit(1); } } else if (scrollY > 2.5 * height && scrollY <= 2.7 * height) { setUnit(2); } else if (scrollY > 2.7 * height && scrollY <= 2.8 * height) { setUnit(3); } else if (scrollY > 2.8 * height && scrollY < 3.5 * height) { setUnit(4); } }; const scaleHandler = (scrollY) => { if (scrollY === 0) { setScale(0.8); } else if (scrollY > 0 && scrollY <= height) { setScale( scroll.linearFormula( scrollY, 0.8, 1, 0, height ) ); } else { setScale(1); } }; return (