reza created second page

temp
Reza_ashrafi 3 years ago
parent abbc77fc94
commit f8d203dd2d
  1. 2
      src/App.scss
  2. 8
      src/assets/images/woody-background.svg
  3. 24
      src/utils/scroll.js
  4. 2
      src/views/Home/Page1/Book/index.js
  5. 3
      src/views/Home/Page1/index.js
  6. 51
      src/views/Home/Page2/index.js
  7. 3
      src/views/Home/Page2/index.scss
  8. 4
      src/views/Home/index.js

@ -1,5 +1,7 @@
@import "./constants/size.scss"; @import "./constants/size.scss";
@import "./views/Home/Page1/index.scss"; @import "./views/Home/Page1/index.scss";
@import "./views/Home/Page2/index.scss";
.App { .App {
direction: rtl; direction: rtl;

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 864 KiB

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

@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
export default function Book({ book }) { export default function Book({ book }) {
return ( return (
<Link to={`{/products/${book.name}}`} className="flex group relative"> <Link to={`{/products/${book.name}}`} className="flex group relative">
<img src={book.imageUrl} alt={book.name} className="z-50" /> <img src={book.imageUrl} alt={book.name} />
<button className="py-1.5 px-5 border absolute border-white rounded-2xl group-hover:opacity-100 bottom-10 opacity-0 transition-all left-1/2 transform -translate-x-1/2 bg-blue90 bg-opacity-90 text-white text-sm"> <button className="py-1.5 px-5 border absolute border-white rounded-2xl group-hover:opacity-100 bottom-10 opacity-0 transition-all left-1/2 transform -translate-x-1/2 bg-blue90 bg-opacity-90 text-white text-sm">
مشاهده و خرید مشاهده و خرید
</button> </button>

@ -63,7 +63,6 @@ export default function Page1({ list, page }) {
className="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" className="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
/> />
<div className="container flex flex-col lg:px-8"> <div className="container flex flex-col lg:px-8">
<header className="z-10 w-full h-10 flex flex-row justify-between mb-10"></header>
<div className="w-full relative z-10 px-4" style={{ direction: "ltr" }}> <div className="w-full relative z-10 px-4" style={{ direction: "ltr" }}>
<Carousel <Carousel
show={show} show={show}
@ -118,7 +117,7 @@ export default function Page1({ list, page }) {
to="/products" to="/products"
className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40 px-4 rounded-md backdrop-filter backdrop-blur-md" className="flex flex-row items-center text-white text-xs bg-blueB0 bg-opacity-40 px-4 rounded-md backdrop-filter backdrop-blur-md"
> >
ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" /> ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" />
</Link> </Link>
</div> </div>

@ -2,27 +2,56 @@ import React, { useState, useEffect } from "react";
import _ from "lodash"; 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 [top, setTop] = useState(window.innerHeight); const [top, setTop] = useState(window.innerHeight);
const [boxPosition, setBoxPosition] = useState({
useEffect(() => { translateX : -12,
translateY : 5,
rotate : 5,
});
useEffect(() => {
window.addEventListener("scroll", (e) => { window.addEventListener("scroll", (e) => {
setTop(scroll.homeScrollHandler(page)); setTop(scroll.homeScrollHandler(page));
boxPositionHandler(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) {
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),
});
}else{
setBoxPosition({
translateY : 12,
translateX : 15,
rotate : 0,
});
}
};
return ( return (
<div <div
className={_.join( className={_.join(["home-page2 h-screen w-full fixed left-0"], " ")}
[
"h-screen w-full pt-20 fixed left-0 bg-gray-200",
],
" "
)}
style={{ top: top }} style={{ top: top }}
> >
<div
className={_.join(
["relative w-full h-full bg-blue-500 shadow-2xl transform"],
" "
)}
style={{ transform: `translateX(${boxPosition.translateX}%) rotate(${boxPosition.rotate}deg) translateY(${boxPosition.translateY}%)` }}
></div>
</div> </div>
); );
} }

@ -0,0 +1,3 @@
.home-page2{
background-image: url(../../../assets/images/woody-background.svg);
}

@ -20,8 +20,8 @@ export default function Home() {
<Navbar /> <Navbar />
<Page1 page={1} /> <Page1 page={1} />
<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} />

Loading…
Cancel
Save