reza find box formula

temp
Reza_ashrafi 3 years ago
parent f8d203dd2d
commit bbad8b0b9a
  1. 5
      src/assets/images/home-page2.svg
  2. 44
      src/utils/scroll.js
  3. 65
      src/views/Home/Page2/index.js
  4. 2
      src/views/Home/Page2/index.scss
  5. 6
      src/views/Home/index.js

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 1.3 MiB

@ -3,16 +3,16 @@ class scroll {
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 (scrollY === 0) {
// return 0; // return 0;
// } if (scrollY === 0) {
// if(scrollY > 0 && scrollY < 2 * height) { return 0;
// return -scrollY; }
// } if(scrollY > 0 && scrollY < 2 * height) {
// if(scrollY === 2 * height){ return -scrollY;
// return -height; }
// } if(scrollY === 2 * height){
return -height;
}
}else }else
if (index === 2) { if (index === 2) {
if (scrollY === 0) { if (scrollY === 0) {
@ -21,21 +21,23 @@ class scroll {
if (scrollY > 0 && scrollY < height) { if (scrollY > 0 && scrollY < height) {
return height - scrollY; return height - scrollY;
} }
if(scrollY === 2 * height){ if(scrollY === 3 * height){
return -1 * height; return -1 * height;
} }
}else
if (index === 3) {
if (scrollY <= height) {
return height;
}
if (scrollY > height && scrollY < 3 * height) {
return 2 * height - scrollY;
}
if(scrollY === 4 * height){
return -height;
} }
}else // else
// if (index === 3) {
// if (scrollY <= height) {
// return height;
// }
// if (scrollY > height && scrollY < 3 * height) {
// return 2 * height - scrollY;
// }
// if(scrollY === 4 * height){
// return -height;
// }
// }
else
if (index === 4) { if (index === 4) {
if (scrollY <= 2 * height) { if (scrollY <= 2 * height) {
return height; return height;

@ -3,42 +3,57 @@ import _ from "lodash";
import scroll from "../../../utils/scroll"; import scroll from "../../../utils/scroll";
export default function Page2({ list, page }) { export default function Page2({ list, page }) {
const height = window.innerHeight;
const [top, setTop] = useState(window.innerHeight); const [top, setTop] = useState(window.innerHeight);
const [boxPosition, setBoxPosition] = useState({ const [boxPosition, setBoxPosition] = useState({
translateX : -12, translateY: null,
translateY : 5, translateX: null,
rotate : 5, rotate: null,
}); });
useEffect(() => { useEffect(() => {
setBoxPosition({
translateY: boxPositionFormula(window.scrollY, 5, 7, "increase"),
translateX: boxPositionFormula(window.scrollY, 5, 7, "increase"),
rotate: boxPositionFormula(window.scrollY, 5, 10, "decrease"),
});
window.addEventListener("scroll", (e) => { window.addEventListener("scroll", (e) => {
setTop(scroll.homeScrollHandler(page)); setTop(scroll.homeScrollHandler(page));
boxPositionHandler(window.scrollY); boxPositionHandler(window.scrollY);
mobilePositionHandler(window.scrollY);
}); });
}, []); }, []);
const height = window.innerHeight;
const boxPositionHandler = (scrollY) => { const boxPositionHandler = (scrollY) => {
if(scrollY <= height){ if (scrollY <= height) {
setBoxPosition({
translateY : 5,
translateX : -12,
rotate : 5,
});
}
else if (scrollY > height && scrollY <= 2 * height) {
setBoxPosition({ setBoxPosition({
translateY : (-9 + (scrollY + height) / 154) > 12 ? 12 : (-9 + (scrollY + height) / 154), translateY: 5,
translateX : (-66 + (scrollY + height) / 40) > 15 ? 15 : (-66 + (scrollY + height) / 40), translateX: -12,
rotate : (-((scrollY + height) / 214) + 15) < 0 ? 0 : (-((scrollY + height) / 214) + 15), rotate: 5,
}); });
}else{ } else if (scrollY > height && scrollY <= 2 * height) {
setBoxPosition({ setBoxPosition({
translateY : 12, ...boxPosition,
translateX : 15, translateY: boxPositionFormula(scrollY, 5, 7, "increase"),
rotate : 0, translateX: boxPositionFormula(scrollY, -12, 1.5, "increase"),
rotate: boxPositionFormula(scrollY, 5, 10, "decrease"),
}); });
} else {
// setBoxPosition({
// translateY: 12,
// translateX: 15,
// rotate: 0,
// });
} }
};
const mobilePositionHandler = (scrollY) => {};
const boxPositionFormula = (scrollY, first, speed, direction) => {
if (direction === "increase") {
return first + (((scrollY - height) / scrollY) * 100) / speed;
} else {
return first - (((scrollY - height) / scrollY) * 100) / speed;
}
}; };
return ( return (
<div <div
@ -47,11 +62,17 @@ export default function Page2({ list, page }) {
> >
<div <div
className={_.join( className={_.join(
["relative w-full h-full bg-blue-500 shadow-2xl transform"], [
"relative w-full h-full shadow-2xl transform d-flex justify-center bg-white items-center text-center",
],
" " " "
)} )}
style={{ transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)` }} style={{
></div> transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)`,
}}
>
<div className="absolute left-4 top-4 h-40 w-40 bg-red-500"></div>
</div>
</div> </div>
); );
} }

@ -1,3 +1,5 @@
.home-page2{ .home-page2{
background-image: url(../../../assets/images/woody-background.svg); background-image: url(../../../assets/images/woody-background.svg);
background-repeat: no-repeat;
background-size: cover;
} }

@ -22,9 +22,9 @@ export default function Home() {
<Page2 page={2} /> <Page2 page={2} />
{/* <Page3 page={3} /> */} {/* <Page3 page={3} /> */}
{/* <Page4 page={4} /> */} {/* <Page4 page={4} /> */}
<Page5 page={5} /> {/* <Page5 page={5} /> */}
<Page6 page={6} /> {/* <Page6 page={6} /> */}
<Page7 page={7} /> {/* <Page7 page={7} /> */}
</div> </div>
); );
} }

Loading…
Cancel
Save