reza optimized app

temp
Reza_ashrafi 3 years ago
parent 69633f5a00
commit 29bb9849f9
  1. 42
      src/components/FloatWidthMouse/index.js
  2. 1
      src/redux/actions/index.js
  3. 74
      src/redux/actions/scroll.js
  4. 1
      src/redux/reducers/index.js
  5. 161
      src/redux/reducers/scroll.js
  6. 99
      src/utils/scroll.js
  7. 16
      src/views/Home/Landscape/Page1/index.js
  8. 41
      src/views/Home/Landscape/Page2/Mobile/Video/index.js
  9. 7
      src/views/Home/Landscape/Page2/Mobile/index.js
  10. 244
      src/views/Home/Landscape/Page2/index.js
  11. 55
      src/views/Home/Landscape/Page3/index.js
  12. 22
      src/views/Home/Landscape/Page4/index.js
  13. 55
      src/views/Home/Landscape/Test/index.js
  14. 21
      src/views/Home/Landscape/VideoTube/index.js
  15. 147
      src/views/Home/Landscape/index.js

@ -1,26 +1,40 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
export default function FloatWithMouse() { function FloatWithMouse({ floatMouseToggle }) {
const [left, setLeft] = useState(null); const [left, setLeft] = useState(null);
const [top, setTop] = useState(null); const [top, setTop] = useState(null);
useEffect(() => { useEffect(() => {
window.addEventListener("mousemove", (e) => { window.addEventListener("mousemove", (e) => {
setLeft(e.pageX); if (floatMouseToggle) {
setTop(e.pageY); setLeft(e.pageX);
setTop(e.pageY);
}
}); });
}); });
return ( return (
<div <>
className="absolute rounded-full transition-a;; duration-1000 ease-out" {floatMouseToggle && (
style={{ <div
left: left - 500, className="absolute rounded-full transition-a;; duration-1000 ease-out"
top: top - 500, style={{
width: 1000, left: left - 500,
height: 1000, top: top - 500,
background: width: 1000,
"radial-gradient(circle, hsla(230, 100%, 87%, 1) 0%, hsla(230, 100%, 87%, 1) 0%, hsla(0, 0%, 100%, 0) 55%)", height: 1000,
}} background:
></div> "radial-gradient(circle, hsla(230, 100%, 87%, 1) 0%, hsla(230, 100%, 87%, 1) 0%, hsla(0, 0%, 100%, 0) 55%)",
}}
></div>
)}
</>
); );
} }
const mapStateToProps = (state) => ({
floatMouseToggle: state.scrollAction.floatMouseToggle,
});
export default connect(mapStateToProps, {})(FloatWithMouse);

@ -9,6 +9,7 @@ export { default as userProduct } from "./userProduct";
export { default as content } from "./content"; export { default as content } from "./content";
export { default as faq } from "./faq"; export { default as faq } from "./faq";
export { default as file } from "./file"; export { default as file } from "./file";
export {default as scrollAction} from "./scroll";

@ -0,0 +1,74 @@
const scrollAction = {
floatMouseToggle:
(data = null) =>
async (dispatch) => {
await dispatch({ type: "scroll/page1/floatMouse", data });
},
handlePage1TopPosition:
(data = null) =>
async (dispatch) => {
await dispatch({ type: "scroll/page1/top", data });
},
handlePage2TopPosition:
(data = null) =>
async (dispatch) => {
await dispatch({ type: "scroll/page2/top", data });
},
handlePage2RotateX:
(data = window.scrollY) =>
async (dispatch) => {
await dispatch({ type: "scroll/page2/rotateX", data });
},
handlePage2BoxPosition:
(data = window.scrollY) =>
async (dispatch) => {
await dispatch({ type: "scroll/page2/boxPosition", data });
},
handlePage2MobilePosition:
(data = window.scrollY) =>
async (dispatch) => {
await dispatch({ type: "scroll/page2/mobilePosition", data });
},
handlePage2VideoPosition:
(data = window.scrollY) =>
async (dispatch) => {
await dispatch({ type: "scroll/page2/videoPosition", data });
},
handlePage2VideoTopPosition:
(data = window.scrollY) =>
async (dispatch) => {
await dispatch({ type: "scroll/page2/videoTopPosition", data });
},
handlePage2MobileUnit:
(data = window.scrollY) =>
async (dispatch) => {
await dispatch({ type: "scroll/page2/mobileUnit", data });
},
handleVideoTubeTopPosition:
(data = window.scrollY) =>
async (dispatch) => {
await dispatch({ type: "scroll/videoTube/top", data });
},
handleTestTranslateY:
(data = window.scrollY) =>
async (dispatch) => {
await dispatch({ type: "scroll/test/translateY", data });
},
handlePage3TopPosition:
(data = window.scrollY) =>
async (dispatch) => {
await dispatch({ type: "scroll/page3/top", data });
},
handlePage3TestTranslateY:
(data = window.scrollY) =>
async (dispatch) => {
await dispatch({ type: "scroll/page3/testTranslateY", data });
},
handlePage4TopPosition:
(data = window.scrollY) =>
async (dispatch) => {
await dispatch({ type: "scroll/page4/top", data });
},
};
export default scrollAction;

@ -8,6 +8,7 @@ export { default as faq } from "./faq";
export { default as file } from "./file"; export { default as file } from "./file";
export { default as userFactor } from "./userFactor"; export { default as userFactor } from "./userFactor";
export { default as userProduct } from "./userProduct"; export { default as userProduct } from "./userProduct";
export {default as scrollAction} from "./scroll";

@ -0,0 +1,161 @@
import scroll from "../../utils/scroll";
const height = window.innerHeight;
const width = window.innerWidth;
const prevScroll = localStorage.getItem("prevScroll");
const initialState = {
page1TopPosition: scroll.homeScrollHandler(1),
page2TopPosition: scroll.homeScrollHandler(2),
page2RotateX: scroll.linearFormula(
scroll.linearFormula(
prevScroll > height ? height : prevScroll,
45,
0,
0,
height
)
),
page2BoxPosition: scroll.initializeBoxPosition(prevScroll),
page2MobilePosition: scroll.linearFormula(
prevScroll > 2.5 * height ? 2.5 * height : prevScroll,
-(((height * 10) / 20 / width) * 100),
6,
2 * height,
2.5 * height
),
page2VideoPosition:
prevScroll > 4 * height
? scroll.videoLinearFormula(4 * height)
: scroll.videoLinearFormula(prevScroll),
page2VideoTopPosition:
prevScroll > 3 * height
? scroll.linearFormula(3 * height, 70, 50, 2.8 * height, 3 * height)
: scroll.linearFormula(prevScroll, 70, 50, 2.8 * height, 3 * height),
page2MobileUnit: scroll.initializeMobileUnit(prevScroll),
videoTubeTopPosition: scroll.homeScrollHandler(3),
testTranslateY: scroll.linearFormula(
prevScroll > 5 * window.innerHeight ? 5 * window.innerHeight : prevScroll,
0,
-101,
4.5 * height,
5 * height
),
page3TopPosition: scroll.homeScrollHandler(4),
page3TestTranslateY:
prevScroll < 6.3 * height
? 0
: scroll.linearFormula(
prevScroll > 7 * height ? 7 * height : prevScroll,
0,
100,
6.3 * height,
7 * height
),
page4TopPosition: scroll.homeScrollHandler(5),
};
export default function scrollAction(state = initialState, action) {
let { type, data } = action;
switch (type) {
case "scroll/page1/floatMouse":
return { ...state, floatMouseToggle: data };
case "scroll/page1/top":
return { ...state, page1TopPosition: scroll.homeScrollHandler(1) };
case "scroll/page2/top":
return { ...state, page2TopPosition: scroll.homeScrollHandler(2) };
case "scroll/page2/rotateX":
return {
...state,
page2RotateX: scroll.linearFormula(window.scrollY, 45, 0, 0, height),
};
case "scroll/page2/boxPosition":
return {
...state,
page2BoxPosition: {
translateY: scroll.linearFormula(
data.scrollY,
data.translateY.pos1,
data.translateY.pos2,
data.start,
data.end
),
translateX: scroll.linearFormula(
data.scrollY,
data.translateX.pos1,
data.translateX.pos2,
data.start,
data.end
),
rotate: scroll.linearFormula(
data.scrollY,
data.rotate.pos1,
data.rotate.pos2,
data.start,
data.end
),
},
};
case "scroll/page2/mobilePosition":
return {
...state,
page2MobilePosition: scroll.linearFormula(
window.scrollY,
-(((height * 10) / 20 / width) * 100),
6,
2 * height,
2.5 * height
),
};
case "scroll/page2/videoPosition":
return {
...state,
page2VideoPosition: scroll.videoLinearFormula(window.scrollY),
};
case "scroll/page2/videoTopPosition":
return {
...state,
page2VideoTopPosition: scroll.linearFormula(
window.scrollY,
70,
50,
2.8 * height,
3 * height
),
};
case "scroll/page2/mobileUnit":
return {
...state,
page2MobileUnit: scroll.initializeMobileUnit(window.scrollY),
};
case "scroll/videoTube/top":
return { ...state, videoTubeTopPosition: scroll.homeScrollHandler(3) };
case "scroll/test/translateY":
return {
...state,
testTranslateY: scroll.linearFormula(
window.scrollY,
0,
-101,
4.5 * height,
5 * height
),
};
case "scroll/page3/top":
return { ...state, page3TopPosition: scroll.homeScrollHandler(4) };
case "scroll/page3/testTranslateY":
return {
...state,
page3TestTranslateY: scroll.linearFormula(
window.scrollY,
0,
100,
6.3 * height,
7 * height
),
};
case "scroll/page4/top":
return { ...state, page4TopPosition: scroll.homeScrollHandler(5) };
default:
return state;
}
}

@ -4,58 +4,58 @@ class scroll {
}; };
homeScrollHandler = (index) => { homeScrollHandler = (index) => {
const prevScroll = Number(localStorage.getItem('prevScroll'));
const height = Number(window.innerHeight); const height = Number(window.innerHeight);
const scrollY = Number(window.scrollY); const scrollY = Number(window.scrollY);
if (index === 1) { if (index === 1) {
// return 0; if (prevScroll === 0) {
if (scrollY === 0) {
return 0; return 0;
}else
if (prevScroll > 0 && prevScroll <= height) {
return -prevScroll;
} }
if (scrollY > 0 && scrollY < 7 * height) { if (prevScroll > height) {
return -scrollY;
}
if (scrollY === 7 * height) {
return -height; return -height;
} }
} else if (index === 2) { } else if (index === 2) {
if (scrollY === 0) { if (prevScroll === 0) {
return height; return height;
} }
if (scrollY > 0 && scrollY < height) { if (prevScroll > 0 && prevScroll <= height) {
return height - scrollY; return height - prevScroll;
} }
if (scrollY >= 10 * height) { if (prevScroll > 10 * height) {
return -1 * height; return -1 * height;
} }
} else if (index === 3) { } else if (index === 3) {
if (scrollY <= 3 * height) { if (prevScroll <= 3.5 * height) {
return height; return height;
} }
if (scrollY > 3 * height && scrollY < 4 * height) { if (prevScroll > 3.5 * height && prevScroll <= 4 * height) {
return 4 * height - scrollY; return 4 * height - prevScroll;
} }
if (scrollY === 10 * height) { if (prevScroll > 10 * height) {
return -height; return -height;
} }
} else if (index === 4) { } else if (index === 4) {
if (scrollY <= 5 * height) { if (prevScroll <= 5 * height) {
return height; return height;
} else if (scrollY > 5 * height && scrollY < 6 * height) { } else if (prevScroll > 5 * height && prevScroll < 6 * height) {
return 6 * height - scrollY; return 6 * height - prevScroll;
} }
if (scrollY === 10 * height) { if (prevScroll === 10 * height) {
return -height; return -height;
} }
} else if (index === 5) { } else if (index === 5) {
if (scrollY <= 7.3 * height) { if (prevScroll <= 7.3 * height) {
return height; return height;
} else if (scrollY > 7.3 * height && scrollY < 8.3 * height) { } else if (prevScroll > 7.3 * height && prevScroll < 8.3 * height) {
return 8.3 * height - scrollY; return 8.3 * height - prevScroll;
} }
if (scrollY === 10 * height) { if (prevScroll === 10 * height) {
return -height; return -height;
} }
} }
}; };
linearFormula = (currentScroll, position1, position2, scroll1, scroll2) => { linearFormula = (currentScroll, position1, position2, scroll1, scroll2) => {
@ -153,6 +153,59 @@ class scroll {
left: currentLeft, left: currentLeft,
}; };
}; };
initializeBoxPosition = (currentScroll) => {
const height= window.innerHeight;
if(currentScroll < height){
console.log(currentScroll);
return {
translateX: -5,
translateY: -5,
rotate: 5
}
}
if(currentScroll > height && currentScroll < 2 * height){
return {
translateX: this.linearFormula(currentScroll, -5, 32, height, 2 * height),
translateY: this.linearFormula(currentScroll, -5, 10, height, 2 * height),
rotate: this.linearFormula(currentScroll, 5, 0, height, 2 * height)
}
}
if(currentScroll > 2 * height && currentScroll <= 2.5 * height){
return {
translateX: 32,
translateY: 10,
rotate: 0
}
}
if(currentScroll > 2.5 * height && currentScroll <= 3 * height){
return {
translateX: this.linearFormula(currentScroll, 32, 32, 2.5 * height, 3 * height),
translateY: this.linearFormula(currentScroll, 10, -30, 2.5 * height, 3 * height),
rotate: this.linearFormula(currentScroll, 0, 0, 2.5 * height, 3 * height)
}
}
if(currentScroll > 3 * height){
return {
translateX: 32,
translateY: -30,
rotate: 0
}
}
};
initializeMobileUnit = (currentScroll) => {
const height = window.innerHeight;
if (currentScroll > 2 * height && currentScroll <= 2.3 * height) {
return 1;
} else if (currentScroll > 2.3 * height && currentScroll <= 2.7 * height) {
return 2;
} else if (currentScroll > 2.7 * height && currentScroll <= 2.8 * height) {
return 3;
} else if (currentScroll > 2.8 * height && currentScroll < 3.5 * height) {
return 4;
}
}
} }
const _scroll = new scroll(); const _scroll = new scroll();

@ -1,10 +1,10 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Carousel } from "@trendyol-js/react-carousel"; import { Carousel } from "@trendyol-js/react-carousel";
import Book from "./Book"; import Book from "./Book";
import FloatWithMouse from "../../../../components/FloatWidthMouse"; import FloatWithMouse from "../../../../components/FloatWidthMouse";
import Lights from "./Lights"; import Lights from "./Lights";
import scroll from "../../../../utils/scroll";
import _ from "lodash"; import _ from "lodash";
@ -20,10 +20,9 @@ import arrowBottomIcon from "../../../../assets/icons/arrows-bottom-blue.svg";
import sheffImage from "../../../../assets/images/sheff.svg"; import sheffImage from "../../../../assets/images/sheff.svg";
import arrowLeftWhite from "../../../../assets/icons/arrow-left-white.svg"; import arrowLeftWhite from "../../../../assets/icons/arrow-left-white.svg";
export default function Page1({ list, page }) { function Page1({ list, top }) {
const height = window.innerHeight; const height = window.innerHeight;
const [show, setShow] = useState(null); const [show, setShow] = useState(null);
const [top, setTop] = useState(0);
useEffect(() => { useEffect(() => {
const width = window.innerWidth; const width = window.innerWidth;
@ -42,11 +41,6 @@ export default function Page1({ list, page }) {
} else if (width > 1024) { } else if (width > 1024) {
setShow(4); setShow(4);
} }
window.addEventListener("scroll", (e) => {
if (window.scrollY > 0 && window.scrollY < 4 * height) {
setTop(() => scroll.homeScrollHandler(page));
}
});
}, []); }, []);
return ( return (
@ -152,6 +146,12 @@ export default function Page1({ list, page }) {
); );
} }
const mapStateToProps = (state) => ({
top: state.scrollAction.page1TopPosition,
});
export default connect(mapStateToProps, {})(Page1);
Page1.defaultProps = { Page1.defaultProps = {
list: [ list: [
{ {

@ -1,40 +1,10 @@
import React, { useState, useEffect, useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
import {connect} from 'react-redux';
import _ from "lodash"; import _ from "lodash";
import ARImage from "../../../../../../assets/images/ar.jpg"; import ARImage from "../../../../../../assets/images/ar.jpg";
import scroll from "../../../../../../utils/scroll"; import scroll from "../../../../../../utils/scroll";
export default function Video({ selectedVideo, videoPosition }) { function Video({ top, videoPosition }) {
const height = window.innerHeight;
const [top, setTop] = useState(null);
useEffect(() => {
scroll.linearFormula(
window.scrollY > 3 * height ? 3 * height : window.scrollY,
70,
50,
2.8 * height,
3 * height
);
window.addEventListener("scroll", () => {
const scrollY = window.scrollY;
if(scrollY > 0 && scrollY < 3 * height) {
videoTopPositionHandler(scrollY);
}
});
}, []);
const videoTopPositionHandler = useCallback((scrollY) => {
if (scrollY < 2.8 * height) {
setTop(() => 50);
} else if (scrollY >= 2.8 * height && scrollY < 3 * height) {
setTop(() =>
scroll.linearFormula(scrollY, 75, 50, 2.8 * height, 3 * height)
);
} else {
setTop(() => 50);
}
},[top]);
return ( return (
<div className="relative h-full w-full bg-transparent"> <div className="relative h-full w-full bg-transparent">
<video <video
@ -80,3 +50,10 @@ export default function Video({ selectedVideo, videoPosition }) {
</div> </div>
); );
} }
const mapStateToProps = (state) => ({
videoPosition: state.scrollAction.page2VideoPosition,
top : state.scrollAction.page2VideoTopPosition
})
export default connect(mapStateToProps, {})(Video);

@ -6,7 +6,7 @@ import QrScanner from "./QrScanner";
import AR from "./AR"; import AR from "./AR";
import Video from "./Video"; import Video from "./Video";
function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }) { function Mobile({ mobilePosition, selectedVideo, unit }) {
return ( return (
<div <div
className={_.join( className={_.join(
@ -18,7 +18,6 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
height: (window.innerHeight * 9) / 10, height: (window.innerHeight * 9) / 10,
width: (window.innerHeight * 10) / 20, width: (window.innerHeight * 10) / 20,
left: mobilePosition + "%", left: mobilePosition + "%",
// transform: `translateX(-${(window.innerHeight * 7) / 40 - 84}px)`,
border: '4px solid black' border: '4px solid black'
}} }}
> >
@ -65,7 +64,7 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
" " " "
)} )}
> >
<Video videoPosition={videoPosition} selectedVideo={selectedVideo} /> <Video selectedVideo={selectedVideo} />
</div> </div>
</div> </div>
</div> </div>
@ -75,6 +74,8 @@ function Mobile({ mobilePosition, videoPosition, autoPlay, selectedVideo, unit }
export default connect( export default connect(
(state) => ({ (state) => ({
selectedVideo: state.publicApi.selectedVideo, selectedVideo: state.publicApi.selectedVideo,
mobilePosition: state.scrollAction.page2MobilePosition,
unit : state.scrollAction.page2MobileUnit,
}), }),
{} {}
)(Mobile); )(Mobile);

@ -1,4 +1,5 @@
import React, { useState, useEffect, useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
import { connect } from "react-redux";
import _ from "lodash"; import _ from "lodash";
import scroll from "../../../../utils/scroll"; import scroll from "../../../../utils/scroll";
import Mobile from "./Mobile"; import Mobile from "./Mobile";
@ -6,232 +7,7 @@ import qrImage from "../../../../assets/images/qrImage.png";
import rightBg from "../../../../assets/images/page-bg.png"; import rightBg from "../../../../assets/images/page-bg.png";
import leftBg from "../../../../assets/images/page-bg-1.png"; import leftBg from "../../../../assets/images/page-bg-1.png";
export default function Page2({ list, page, autoPlay }) { function Page2({ top, rotateX, boxPosition }) {
const height = window.innerHeight;
const [top, setTop] = useState(window.innerHeight);
const [rotateX, setRotateX] = 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(() => {
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
)
);
setRotateX(
scroll.linearFormula(
window.scrollY > height ? height : window.scrollY,
45,
0,
0,
height
)
);
if (window.scrollY > 3.5 * height && window.scrollY < 4 * height) {
videoPositionHandler(
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;
if (scrollY > 0 && scrollY < 4 * height) {
setTop(scroll.homeScrollHandler(page));
}
if (scrollY > 0 && scrollY < height) {
setRotateX(scaleHandler(scrollY));
}
if (scrollY > 0 && scrollY <= 3 * height) {
boxPositionHandler(scrollY);
}
if (scrollY >= 0 && scrollY <= 2.5 * height) {
mobilePositionHandler(scrollY);
}
if (scrollY > 0 * height && scrollY < 3.5 * height) {
unitPositionHandler(scrollY);
}
if (scrollY > 3.5 * height && scrollY < 4 * height) {
videoPositionHandler(scrollY);
}
});
}, []);
useEffect(() => {
if (window.scrollY > 0 * height && window.scrollY < 3.5 * height) {
unitPositionHandler(window.scrollY);
}
}, [mobilePosition]);
const boxPositionHandler = useCallback(
(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 {
}
},
[boxPosition]
);
const mobilePositionHandler = useCallback(
(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);
}
},
[mobilePosition]
);
const videoPositionHandler = useCallback(
(scrollY) => {
if (scrollY <= 3.5 * height) {
setVideoPosition(() => null);
} else if (scrollY > 3.5 * height && scrollY < 4 * height) {
setVideoPosition(scroll.videoLinearFormula(scrollY));
} else {
}
},
[videoPosition]
);
const unitPositionHandler = useCallback(
(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);
}
},
[unit]
);
const scaleHandler = useCallback(
(scrollY) => {
if (scrollY === 0) {
setRotateX(90);
} else if (scrollY > 0 && scrollY <= height) {
setRotateX(scroll.linearFormula(scrollY, 45, 0, 0, height));
} else {
setRotateX(0);
}
},
[rotateX]
);
return ( return (
<div <div
className={_.join(["h-screen w-full fixed left-0 overflow-hidden"], " ")} className={_.join(["h-screen w-full fixed left-0 overflow-hidden"], " ")}
@ -239,9 +15,9 @@ export default function Page2({ list, page, autoPlay }) {
top: top, top: top,
perspective: "400px", perspective: "400px",
}} }}
onClick={(e) => e.stopPropagation()}
> >
<div <div
onClick={(e) => e.stopPropagation()}
className={_.join( className={_.join(
[" home-page2 h-full w-full origin-bottom overflow-hidden"], [" home-page2 h-full w-full origin-bottom overflow-hidden"],
" " " "
@ -309,13 +85,19 @@ export default function Page2({ list, page, autoPlay }) {
</div> </div>
{/* mobile phone */} {/* mobile phone */}
<Mobile <Mobile
mobilePosition={mobilePosition}
videoPosition={videoPosition}
autoPlay={autoPlay}
unit={unit}
/> />
{/* video */} {/* video */}
</div> </div>
</div> </div>
); );
} }
const mapStateToProps = (state) => ({
top: state.scrollAction.page2TopPosition,
rotateX : state.scrollAction.page2RotateX,
boxPosition : state.scrollAction.page2BoxPosition,
mobilePosition : state.scrollAction.page2MobilePosition,
videoPosition : state.scrollAction.page2VideoPosition
});
export default connect(mapStateToProps, {})(Page2);

@ -1,58 +1,18 @@
import React, { useState, useEffect, useCallback } from "react"; import React, { useState, useEffect, useCallback } from "react";
import {connect} from 'react-redux';
import _ from "lodash"; import _ from "lodash";
import scroll from "../../../../utils/scroll";
import testResultImage from "../../../../assets/images/test-result.png"; import testResultImage from "../../../../assets/images/test-result.png";
// import testPageInfoImage from "../../../../assets/images/test-page-info.svg"; // import testPageInfoImage from "../../../../assets/images/test-page-info.svg";
import testPageImage from "../../../../assets/images/test-page.svg"; import testPageImage from "../../../../assets/images/test-page.svg";
import testPageFormulaImage from "../../../../assets/images/test-page-formula.svg"; import testPageFormulaImage from "../../../../assets/images/test-page-formula.svg";
export default function Page3({ list, page }) { function Page3({ top, translateY }) {
const height = window.innerHeight;
const [top, setTop] = useState(window.innerHeight);
const [translateX, setTranslateX] = useState(null);
useEffect(() => {
setTop(scroll.homeScrollHandler(page));
setTranslateX(
scroll.linearFormula(
window.scrollY > 7 * height ? 7 * height : window.scrollY,
0,
100,
6.3 * height,
7 * height
)
);
window.addEventListener("scroll", (e) => {
const scrollY = window.scrollY;
if (scrollY <= 6.3 * height) {
setTop(scroll.homeScrollHandler(page));
}
if (scrollY > 6.3 && scrollY < 7 * height) {
translateXHandler(window.scrollY);
}
});
}, []);
const translateXHandler = useCallback(
(scrollY) => {
if (scrollY < 6.3 * height) {
setTranslateX(() => 0);
} else if (scrollY >= 6.3 * height && scrollY <= 7 * height) {
setTranslateX(() =>
scroll.linearFormula(window.scrollY, 0, 100, 6.3 * height, 7 * height)
);
} else {
setTranslateX(() => 100);
}
},
[translateX]
);
return ( return (
<div <div
className={_.join( className={_.join(
[ [
"fixed left-0 h-screen w-full bg-white transition-opacity duration-1000 flex flex-row justify-center items-end z-30", "fixed left-0 h-screen w-full bg-white transition-opacity duration-1000 flex flex-row justify-center items-end z-30",
top > 0 ? "opacity-0" : "opacity-100", top > 50 ? "opacity-0" : "opacity-100",
], ],
" " " "
)} )}
@ -77,7 +37,7 @@ export default function Page3({ list, page }) {
/> />
<div <div
className="w-full h-full relative z-20 bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm" className="w-full h-full relative z-20 bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm"
style={{ transform: `translateY(${-1 * translateX}%)` }} style={{ transform: `translateY(${-1 * translateY}%)` }}
> >
<img <img
src={testResultImage} src={testResultImage}
@ -89,3 +49,10 @@ export default function Page3({ list, page }) {
</div> </div>
); );
} }
const mapStateToProps = (state) => ({
top : state.scrollAction.page3TopPosition,
translateY : state.scrollAction.page3TestTranslateY
})
export default connect(mapStateToProps, {})(Page3);

@ -1,27 +1,17 @@
import React, { useState, useEffect } from "react"; import {connect} from 'react-redux';
import _ from "lodash"; import _ from "lodash";
import scroll from "../../../../utils/scroll"; import scroll from "../../../../utils/scroll";
import bgImage from "../../../../assets/images/page5-bg.svg"; import bgImage from "../../../../assets/images/page5-bg.svg";
import bazarImage from "../../../../assets/images/bazar.svg"; import bazarImage from "../../../../assets/images/bazar.svg";
import appStoreImage from "../../../../assets/images/app-store.svg"; import appStoreImage from "../../../../assets/images/app-store.svg";
export default function Page4({ list, page }) { function Page4({ top }) {
const [top, setTop] = useState(window.innerHeight);
useEffect(() => {
window.addEventListener("scroll", (e) => {
if(window.scrollY > 7 * window.innerHeight) {
setTop(() => scroll.homeScrollHandler(page));
}
});
}, []);
return ( return (
<div <div
className={_.join( className={_.join(
[ [
"z-30 fixed left-0 h-screen w-full pt-20 bg-white", "z-30 fixed left-0 h-screen w-full pt-20 bg-white",
top === window.innerHeight ? "opacity-0 pointer-events-none" : "opacity-100", top >= window.innerHeight -50 ? "opacity-0 pointer-events-none" : "opacity-100",
], ],
" " " "
)} )}
@ -61,3 +51,9 @@ export default function Page4({ list, page }) {
</div> </div>
); );
} }
const mapStateToProps = (state) => ({
top : state.scrollAction.page4TopPosition
})
export default connect(mapStateToProps, {})(Page4)

@ -1,50 +1,11 @@
import React, { useEffect, useState, useCallback } from "react"; import React, { useEffect, useState, useCallback } from "react";
import {connect} from 'react-redux';
import _ from "lodash"; import _ from "lodash";
import timerIcon from "../../../../assets/icons/timer.svg"; import timerIcon from "../../../../assets/icons/timer.svg";
import QuestionBox from "./Question"; import QuestionBox from "./Question";
import scroll from "../../../../utils/scroll"; import scroll from "../../../../utils/scroll";
export default function Test({ title, duration, questions }) { function Test({ title, duration, questions, translateY }) {
const [translateY, setTranslateY] = useState(0);
const [testPosition, setTestPosition] = useState(null);
useEffect(() => {
setTranslateY(() =>
scroll.linearFormula(
window.scrollY > 5 * window.innerHeight
? 5 * window.innerHeight
: window.scrollY,
0,
-101,
4.5 * window.innerHeight,
5 * window.innerHeight
)
);
window.addEventListener("scroll", () => {
testTransformHandler(window.scrollY);
if (window.scrollY > 1000) {
localStorage.setItem(
"testRect",
JSON.stringify(
document.getElementById("test").getBoundingClientRect()
)
);
}
});
}, []);
const testTransformHandler = useCallback((scrollY) => {
const height = window.innerHeight;
if (scrollY <= 4.5 * height) {
setTranslateY(() => 0);
setTestPosition(() => null);
} else if (scrollY > 4.5 * height && scrollY < 5 * height) {
setTranslateY(() =>
scroll.linearFormula(scrollY, 0, -101, 4.5 * height, 5 * height)
);
setTestPosition(() => null);
}
},[testPosition, translateY]);
return ( return (
<div <div
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
@ -53,11 +14,6 @@ export default function Test({ title, duration, questions }) {
style={{ style={{
minHeight: window.innerHeight - 180, minHeight: window.innerHeight - 180,
transform: `translateY(${translateY}%)`, transform: `translateY(${translateY}%)`,
position: testPosition ? "fixed" : "static",
left: testPosition?.left ? testPosition?.left : "auto",
top: testPosition?.top ? testPosition?.top : "auto",
width: testPosition?.width ? testPosition?.width : "auto",
height: testPosition?.height ? testPosition?.height : "auto",
}} }}
> >
<header <header
@ -91,6 +47,12 @@ export default function Test({ title, duration, questions }) {
); );
} }
const mapStateToProps = (state) => ({
translateY: state.scrollAction.testTranslateY,
})
export default connect(mapStateToProps, {})(Test);
Test.defaultProps = { Test.defaultProps = {
title: "آزمون شیمی پایه دوازدهم متوسطه", title: "آزمون شیمی پایه دوازدهم متوسطه",
duration: "48:29", duration: "48:29",
@ -106,3 +68,4 @@ Test.defaultProps = {
}, },
], ],
}; };

@ -16,37 +16,21 @@ import { book, publicApi } from "../../../../redux/actions";
// import Loader from "../../components/Loader"; // import Loader from "../../components/Loader";
function VodTube({ function VodTube({
top,
autoPlay, autoPlay,
page, page,
selectedVideo, selectedVideo,
info, info,
// bookSection,
// loading,
getInfo, getInfo,
// categories,
// setVideoActive,
// allBooks,
theme, theme,
}) { }) {
const [top, setTop] = useState(window.innerHeight);
const videoListTag = useRef(null); const videoListTag = useRef(null);
useEffect(() => { useEffect(() => {
window.addEventListener("scroll", (e) => {
setTop(scroll.homeScrollHandler(page));
});
// localStorage.setItem("scroll-list", "on");
getInfo({ getInfo({
bookId: 8, bookId: 8,
}); });
}, []); }, []);
// useEffect(() => {
// if (allBooks && localStorage.getItem("category")) {
// const cat = localStorage.getItem("category")?.split(",");
// bookSection({ bookId: cat[0], categoryId: cat[1] });
// }
// }, [allBooks]);
const light = theme === "light"; const light = theme === "light";
return ( return (
<div <div
@ -54,7 +38,7 @@ function VodTube({
className={_.join( className={_.join(
[ [
"fixed flex flex-row rtl pt-20 lg:px-5 xl:px-10 w-full bg-white dark:bg-black bg-opacity-80 transition-opacity duration-500 min-h-screen backdrop-filter backdrop-blur-md", "fixed flex flex-row rtl pt-20 lg:px-5 xl:px-10 w-full bg-white dark:bg-black bg-opacity-80 transition-opacity duration-500 min-h-screen backdrop-filter backdrop-blur-md",
top > 0 ? "opacity-0 z-0" : "opacity-100 z-10", top > 10 ? "opacity-0 z-0" : "opacity-100 z-10",
], ],
" " " "
)} )}
@ -181,6 +165,7 @@ function VodTube({
export default connect( export default connect(
(state) => ({ (state) => ({
top : state.scrollAction.videoTubeTopPosition,
selectedVideo: state.publicApi.selectedVideo, selectedVideo: state.publicApi.selectedVideo,
info: state.publicApi?.bookInfo, info: state.publicApi?.bookInfo,
loading: state.publicApi.loading, loading: state.publicApi.loading,

@ -1,24 +1,42 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { scrollAction } from "../../../redux/actions";
import { connect } from "react-redux";
import Page1 from "./Page1"; import Page1 from "./Page1";
import Page2 from "./Page2"; import Page2 from "./Page2";
import Page3 from "./Page3"; import Page3 from "./Page3";
import Page4 from "./Page4"; import Page4 from "./Page4";
import Dots from '../../../components/Dots'; import Dots from "../../../components/Dots";
import VideoTube from "./VideoTube"; import VideoTube from "./VideoTube";
export default function Home() { function Home({
const [autoPlay, setAutoPlay] = useState(false); floatMouseToggle,
handlePage1TopPosition,
handlePage2TopPosition,
handlePage2RotateX,
handlePage2BoxPosition,
handlePage2MobilePosition,
handlePage2VideoPosition,
handlePage2VideoTopPosition,
handlePage2MobileUnit,
handleVideoTubeTopPosition,
handleTestTranslateY,
handlePage3TopPosition,
handlePage3TestTranslateY,
handlePage4TopPosition,
}) {
const height = window.innerHeight;
const [mouseFlag, setMouseFlag] = useState(true);
// initialState
useEffect(() => { useEffect(() => {
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
if (window.scrollY > 3 * window.innerHeight) { const scrollY = window.scrollY;
setAutoPlay(() => true); localStorage.setItem("prevScroll", scrollY);
} else {
setAutoPlay(() => false);
}
if ( if (
!JSON.parse(localStorage.getItem("joiRect")) && !JSON.parse(localStorage.getItem("joiRect")) &&
window.scrollY > 1000 window.scrollY > 1000 &&
window.scrollY < 2000
) { ) {
localStorage.setItem( localStorage.setItem(
"joiRect", "joiRect",
@ -27,19 +45,124 @@ export default function Home() {
) )
); );
} }
// Dotes
if (scrollY < 1.5 * height) {
if (scrollY > height) {
floatMouseToggle(false);
} else {
floatMouseToggle(true);
}
}
// Page_1
if (scrollY >= 0 && scrollY <= height) {
handlePage1TopPosition();
}
// Page_2
if (scrollY >= 0 && scrollY <= height) {
handlePage2TopPosition();
}
if (scrollY >= 0 && scrollY <= height) {
handlePage2RotateX(window.scrollY);
}
if (scrollY >= height && scrollY <= 2 * height) {
handlePage2BoxPosition({
scrollY,
translateX: {
pos1: -5,
pos2: 32,
},
translateY: {
pos1: -5,
pos2: 10,
},
rotate: {
pos1: 5,
pos2: 0,
},
start: height,
end: 2 * height,
});
}
if (scrollY > 2.5 * height && scrollY <= 3 * height) {
handlePage2BoxPosition({
scrollY,
translateX: {
pos1: 32,
pos2: 32,
},
translateY: {
pos1: 10,
pos2: -30,
},
rotate: {
pos1: 0,
pos2: 0,
},
start: 2.5 * height,
end: 3 * height,
});
}
if (scrollY > 2 * height && scrollY <= 2.5 * height) {
handlePage2MobilePosition();
}
if (scrollY > 2.8 * height && scrollY <= 3 * height) {
handlePage2VideoTopPosition();
}
if (scrollY > 3.5 * height && scrollY <= 4 * height) {
handlePage2VideoPosition();
}
if (scrollY > 2 * height && scrollY < 3.5 * height) {
handlePage2MobileUnit();
}
// Page_3
if (scrollY > 3.5 * height && scrollY < 4 * height) {
handleVideoTubeTopPosition();
}
// Test
if (scrollY >= 4.5 * height && scrollY <= 5 * height) {
handleTestTranslateY();
}
if(scrollY > 5 * height && scrollY <= 6 * height){
handlePage3TopPosition();
}
if(scrollY >= 6.3 * height && scrollY <= 7 * height){
handlePage3TestTranslateY();
}
if(scrollY >= 7.3 * height && scrollY <= 8.3 * height){
handlePage4TopPosition();
}
}); });
}, []); }, []);
return ( return (
<div <div
className=" flex-col bg-white relative w-full rtl hidden lg:flex" className=" flex-col bg-white relative w-full rtl hidden lg:flex"
style={{ height: "950vh" }} style={{ height: "950vh" }}
onScroll={() => console.log(1)}
> >
<Dots /> {/* <Dots /> */}
<Page1 page={1} /> <Page1 page={1} />
<Page2 page={2} autoPlay={autoPlay} /> <Page2 page={2} />
<VideoTube page={3} autoPlay={autoPlay} /> <VideoTube page={3} />
<Page3 page={4} /> <Page3 page={4} />
<Page4 page={5} /> <Page4 page={5} />
</div> </div>
); );
} }
export default connect(() => ({}), {
handlePage1TopPosition: scrollAction.handlePage1TopPosition,
handlePage2TopPosition: scrollAction.handlePage2TopPosition,
handlePage2RotateX: scrollAction.handlePage2RotateX,
handlePage2BoxPosition: scrollAction.handlePage2BoxPosition,
handlePage2MobilePosition: scrollAction.handlePage2MobilePosition,
handlePage2VideoPosition: scrollAction.handlePage2VideoPosition,
handlePage2VideoTopPosition: scrollAction.handlePage2VideoTopPosition,
handlePage2MobileUnit: scrollAction.handlePage2MobileUnit,
handleVideoTubeTopPosition: scrollAction.handleVideoTubeTopPosition,
handleTestTranslateY: scrollAction.handleTestTranslateY,
floatMouseToggle: scrollAction.floatMouseToggle,
handlePage3TopPosition: scrollAction.handlePage3TopPosition,
handlePage3TestTranslateY: scrollAction.handlePage3TestTranslateY,
handlePage4TopPosition: scrollAction.handlePage4TopPosition,
})(Home);

Loading…
Cancel
Save