reza added some item

temp
Reza_ashrafi 3 years ago
parent 5a0bcbe3f2
commit 51e80c53ce
  1. BIN
      src/assets/images/12.png
  2. BIN
      src/assets/images/page-bg-1.png
  3. 4
      src/utils/scroll.js
  4. 4
      src/views/Home/Page1/Header/index.js
  5. 14
      src/views/Home/Page1/Header/index.scss
  6. 3
      src/views/Home/Page2/Mobile/index.js
  7. 54
      src/views/Home/Page2/index.js
  8. 2
      src/views/Home/Page3/index.js
  9. 10
      src/views/Home/VideoTube/index.js
  10. 2
      src/views/Home/index.js

Binary file not shown.

After

Width:  |  Height:  |  Size: 960 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 890 KiB

@ -90,8 +90,8 @@ class scroll {
linearFormula = (currentScroll, position1, position2, scroll1, scroll2) => { linearFormula = (currentScroll, position1, position2, scroll1, scroll2) => {
const alpha = (currentScroll - scroll1) / (scroll2 - scroll1); const alpha = (currentScroll - scroll1) / (scroll2 - scroll1);
const deltaPosition = position2 - position1; const deltaPosition = position2 - position1;
const currectPosition = position1 + deltaPosition * alpha; const currentPosition = position1 + deltaPosition * alpha;
return currectPosition; return currentPosition;
}; };
videoLinearFormula = (currentScroll) => { videoLinearFormula = (currentScroll) => {

@ -25,8 +25,8 @@ const Light = ({ degree }) => {
draggable={false} draggable={false}
src={lightIcon} src={lightIcon}
alt="" alt=""
className={_.join(["absolute z-50 light-animation"], " ")} className={_.join(["absolute z-50 light-animation opacity-50"], " ")}
style={{ transform: `scale(6) translateY(24%)` }} style={{ transform: `scale(6) translateY(24%)`, pointerEvents : 'none' }}
/> />
</div> </div>
); );

@ -6,42 +6,42 @@
@keyframes light-animation { @keyframes light-animation {
0% { 0% {
opacity: 1; opacity: 0.5;
} }
3% { 3% {
opacity: 0; opacity: 0;
} }
6% { 6% {
opacity: 1; opacity: 0.5;
} }
9% { 9% {
opacity: 0; opacity: 0;
} }
30% { 30% {
opacity: 1; opacity: 0.5;
} }
33% { 33% {
opacity: 0; opacity: 0;
} }
36% { 36% {
opacity: 1; opacity: 0.5;
} }
39% { 39% {
opacity: 0; opacity: 0;
} }
60% { 60% {
opacity: 1; opacity: 0.5;
} }
63% { 63% {
opacity: 0; opacity: 0;
} }
66% { 66% {
opacity: 1; opacity: 0.5;
} }
69% { 69% {
opacity: 0; opacity: 0;
} }
100% { 100% {
opacity: 1; opacity: 0.5;
} }
} }

@ -10,7 +10,7 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
return ( return (
<div <div
className={_.join( className={_.join(
["fixed rounded-2xl flex flex-col overflow-hidden shadow-2xl"], ["fixed rounded-2xl flex flex-col overflow-hidden shadow-xl"],
" " " "
)} )}
style={{ style={{
@ -19,6 +19,7 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
width: (window.innerHeight * 10) / 20, width: (window.innerHeight * 10) / 20,
left: mobilePosition + "%", left: mobilePosition + "%",
// transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`, // transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
border: '4px solid black'
}} }}
> >
<div className="relative w-full h-full flex"> <div className="relative w-full h-full flex">

@ -3,11 +3,13 @@ import _ from "lodash";
import scroll from "../../../utils/scroll"; import scroll from "../../../utils/scroll";
import Mobile from "./Mobile"; import Mobile from "./Mobile";
import qrImage from "../../../assets/images/qrImage.png"; import qrImage from "../../../assets/images/qrImage.png";
import leftBg from "../../../assets/images/page-bg.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 }) { export default function Page2({ list, page, autoPlay }) {
const height = window.innerHeight; const height = window.innerHeight;
const [top, setTop] = useState(window.innerHeight); const [top, setTop] = useState(window.innerHeight);
const [scale, setScale] = useState(null);
const [videoPosition, setVideoPosition] = useState(null); const [videoPosition, setVideoPosition] = useState(null);
const [unit, setUnit] = useState(null); const [unit, setUnit] = useState(null);
const [boxPosition, setBoxPosition] = useState({ const [boxPosition, setBoxPosition] = useState({
@ -28,6 +30,16 @@ export default function Page2({ list, page, autoPlay }) {
2.5 * 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) { if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) {
setVideoPosition( setVideoPosition(
window.scrollY > 4 * height window.scrollY > 4 * height
@ -90,6 +102,7 @@ export default function Page2({ list, page, autoPlay }) {
window.addEventListener("scroll", (e) => { window.addEventListener("scroll", (e) => {
const scrollY = window.scrollY; const scrollY = window.scrollY;
setTop(scroll.homeScrollHandler(page)); setTop(scroll.homeScrollHandler(page));
setScale(scaleHandler(scrollY));
boxPositionHandler(scrollY); boxPositionHandler(scrollY);
mobilePositionHandler(scrollY); mobilePositionHandler(scrollY);
if (window.scrollY > 2 * height && window.scrollY < 3.5 * height) { if (window.scrollY > 2 * height && window.scrollY < 3.5 * height) {
@ -192,6 +205,24 @@ export default function Page2({ list, page, autoPlay }) {
setUnit(4); 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 ( return (
<div <div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@ -207,12 +238,14 @@ export default function Page2({ list, page, autoPlay }) {
? 90 - (window.scrollY / height) * 90 ? 90 - (window.scrollY / height) * 90
: 0 : 0
: 90 : 90
}deg)`, }deg) scale(${scale})`,
}} }}
> >
<div <div
className={_.join( className={_.join(
["relative shadow-2xl transform flex bg-white text-center"], [
"relative shadow-2xl transform flex bg-white text-center overflow-hidden",
],
" " " "
)} )}
style={{ style={{
@ -223,11 +256,12 @@ export default function Page2({ list, page, autoPlay }) {
> >
<div className="w-1/2 h-full relative"> <div className="w-1/2 h-full relative">
<img <img
src={leftBg} src={rightBg}
alt="" alt=""
// style={{ // style={{
// transform: `rotate(-${boxPosition.rotate}deg))`, // transform: `rotate(-${boxPosition.rotate}deg))`,
// }} // }}
className="w-full"
/> />
<video <video
className={_.join( className={_.join(
@ -244,12 +278,17 @@ export default function Page2({ list, page, autoPlay }) {
/> />
</video> </video>
</div> </div>
<div className="w-1/2 h-full relative">
<div className="absolute left-5 top-5 h-40 w-40"> <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="" /> <img src={qrImage} alt="" />
</div> </div>
<div <div
className="absolute left-7 bg-black" className="absolute left-7 bg-black z-10"
style={{ style={{
height: (window.innerHeight * 9) / 25 - 40, height: (window.innerHeight * 9) / 25 - 40,
width: (window.innerHeight * 10) / 20 - 16, width: (window.innerHeight * 10) / 20 - 16,
@ -257,6 +296,7 @@ export default function Page2({ list, page, autoPlay }) {
}} }}
></div> ></div>
</div> </div>
</div>
{/* mobile phone */} {/* mobile phone */}
<Mobile <Mobile
mobilePosition={mobilePosition} mobilePosition={mobilePosition}

@ -17,7 +17,7 @@ export default function Page3({ list, page }) {
className={_.join( className={_.join(
[ [
"fixed left-0 h-screen w-full pt-20 bg-white transition-opacity duration-1000 flex flex-row justify-center items-end", "fixed left-0 h-screen w-full pt-20 bg-white transition-opacity duration-1000 flex flex-row justify-center items-end",
top > 0 ? "opacity-0 z-0" : "opacity-100 z-30", top > 0 ? "opacity-0" : "opacity-100 z-10",
], ],
" " " "
)} )}

@ -20,12 +20,12 @@ function VodTube({
page, page,
selectedVideo, selectedVideo,
info, info,
bookSection, // bookSection,
loading, // loading,
getInfo, getInfo,
categories, // categories,
setVideoActive, // setVideoActive,
allBooks, // allBooks,
theme, theme,
}) { }) {
const [top, setTop] = useState(window.innerHeight); const [top, setTop] = useState(window.innerHeight);

@ -33,7 +33,7 @@ export default function Home() {
return ( return (
<div <div
className="flex flex-col bg-white relative w-full rtl" className="flex flex-col bg-white relative w-full rtl"
style={{ height: "800vh" }} style={{ height: "850vh" }}
> >
<Dots /> <Dots />
<Navbar /> <Navbar />

Loading…
Cancel
Save