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

@ -3,42 +3,57 @@ import _ from "lodash";
import scroll from "../../../utils/scroll";
export default function Page2({ list, page }) {
const height = window.innerHeight;
const [top, setTop] = useState(window.innerHeight);
const [boxPosition, setBoxPosition] = useState({
translateX : -12,
translateY : 5,
rotate : 5,
translateY: null,
translateX: null,
rotate: null,
});
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) => {
setTop(scroll.homeScrollHandler(page));
boxPositionHandler(window.scrollY);
mobilePositionHandler(window.scrollY);
});
}, []);
const height = window.innerHeight;
const boxPositionHandler = (scrollY) => {
if(scrollY <= height){
setBoxPosition({
translateY : 5,
translateX : -12,
rotate : 5,
});
}
else if (scrollY > height && scrollY <= 2 * height) {
if (scrollY <= height) {
setBoxPosition({
translateY : (-9 + (scrollY + height) / 154) > 12 ? 12 : (-9 + (scrollY + height) / 154),
translateX : (-66 + (scrollY + height) / 40) > 15 ? 15 : (-66 + (scrollY + height) / 40),
rotate : (-((scrollY + height) / 214) + 15) < 0 ? 0 : (-((scrollY + height) / 214) + 15),
translateY: 5,
translateX: -12,
rotate: 5,
});
}else{
} else if (scrollY > height && scrollY <= 2 * height) {
setBoxPosition({
translateY : 12,
translateX : 15,
rotate : 0,
...boxPosition,
translateY: boxPositionFormula(scrollY, 5, 7, "increase"),
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 (
<div
@ -47,11 +62,17 @@ export default function Page2({ list, page }) {
>
<div
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}%)` }}
></div>
style={{
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>
);
}

@ -1,3 +1,5 @@
.home-page2{
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} />
{/* <Page3 page={3} /> */}
{/* <Page4 page={4} /> */}
<Page5 page={5} />
<Page6 page={6} />
<Page7 page={7} />
{/* <Page5 page={5} /> */}
{/* <Page6 page={6} /> */}
{/* <Page7 page={7} /> */}
</div>
);
}

Loading…
Cancel
Save