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) => {
const alpha = (currentScroll - scroll1) / (scroll2 - scroll1);
const deltaPosition = position2 - position1;
const currectPosition = position1 + deltaPosition * alpha;
return currectPosition;
const currentPosition = position1 + deltaPosition * alpha;
return currentPosition;
};
videoLinearFormula = (currentScroll) => {

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

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

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

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

@ -17,7 +17,7 @@ export default function Page3({ list, page }) {
className={_.join(
[
"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,
selectedVideo,
info,
bookSection,
loading,
// bookSection,
// loading,
getInfo,
categories,
setVideoActive,
allBooks,
// categories,
// setVideoActive,
// allBooks,
theme,
}) {
const [top, setTop] = useState(window.innerHeight);

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

Loading…
Cancel
Save