310 lines
8.5 KiB
310 lines
8.5 KiB
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 ( |
|
<div |
|
onClick={(e) => e.stopPropagation()} |
|
className={_.join( |
|
["home-page2 h-screen w-full fixed left-0 origin-top overflow-hidden"], |
|
" " |
|
)} |
|
style={{ |
|
top: top, |
|
transform: `rotateX(${ |
|
window.scrollY > 0 |
|
? window.scrollY <= height |
|
? 90 - (window.scrollY / height) * 90 |
|
: 0 |
|
: 90 |
|
}deg) scale(${scale})`, |
|
}} |
|
> |
|
<div |
|
className={_.join( |
|
[ |
|
"relative shadow-2xl transform flex bg-white text-center overflow-hidden", |
|
], |
|
" " |
|
)} |
|
style={{ |
|
transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)`, |
|
width: "140%", |
|
height: "140%", |
|
}} |
|
> |
|
<div className="w-1/2 h-full relative"> |
|
<img |
|
src={rightBg} |
|
alt="" |
|
// style={{ |
|
// transform: `rotate(-${boxPosition.rotate}deg))`, |
|
// }} |
|
className="w-full" |
|
/> |
|
<video |
|
className={_.join( |
|
[ |
|
"video outline-none w-1/2 absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 rounded-lg cursor-pointer", |
|
], |
|
" " |
|
)} |
|
controls |
|
> |
|
<source |
|
src={`https://dnvn.ir/api/v1/file/${20840}`} |
|
type={"video/mp4"} |
|
/> |
|
</video> |
|
</div> |
|
<div className="w-1/2 h-full relative"> |
|
<img |
|
src={leftBg} |
|
alt="" |
|
className="absolute w-full h-full left-0 top-0" |
|
/> |
|
<div className="absolute left-5 top-5 h-40 w-40 z-10 bg-white"> |
|
<img src={qrImage} alt="" /> |
|
</div> |
|
<div |
|
className="absolute left-7 bg-black z-10" |
|
style={{ |
|
height: (window.innerHeight * 9) / 25 - 40, |
|
width: (window.innerHeight * 10) / 20 - 16, |
|
bottom: (window.innerHeight * 9) / 30, |
|
}} |
|
></div> |
|
</div> |
|
</div> |
|
{/* mobile phone */} |
|
<Mobile |
|
mobilePosition={mobilePosition} |
|
videoPosition={videoPosition} |
|
autoPlay={autoPlay} |
|
unit={unit} |
|
/> |
|
{/* video */} |
|
</div> |
|
); |
|
}
|
|
|