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 "./views/Home/Page1/index.scss";
@import "./views/Home/Page2/index.scss";
.App {
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 scrollY = Number(window.scrollY);
if (index === 1) {
if (scrollY === 0) {
return 0;
}
if(scrollY > 0 && scrollY < height) {
return -scrollY;
}
if(scrollY === height){
// return '-1' + height;
alert('kir');
}
return 0;
// 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) {
@ -29,10 +29,10 @@ class scroll {
if (scrollY <= height) {
return height;
}
if (scrollY > height && scrollY < 2 * height) {
if (scrollY > height && scrollY < 3 * height) {
return 2 * height - scrollY;
}
if(scrollY === 3 * height){
if(scrollY === 4 * height){
return -height;
}
}else

@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
export default function Book({ book }) {
return (
<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>

@ -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"
/>
<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" }}>
<Carousel
show={show}
@ -118,7 +117,7 @@ export default function Page1({ list, page }) {
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"
>
ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" />
ورود به فروشگاه <img src={arrowLeftWhite} alt="" className="mr-2" />
</Link>
</div>

@ -2,27 +2,56 @@ import React, { useState, useEffect } from "react";
import _ from "lodash";
import scroll from "../../../utils/scroll";
export default function Page2({ list, page }) {
const [top, setTop] = useState(window.innerHeight);
useEffect(() => {
const [boxPosition, setBoxPosition] = useState({
translateX : -12,
translateY : 5,
rotate : 5,
});
useEffect(() => {
window.addEventListener("scroll", (e) => {
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 (
<div
className={_.join(
[
"h-screen w-full pt-20 fixed left-0 bg-gray-200",
],
" "
)}
className={_.join(["home-page2 h-screen w-full fixed left-0"], " ")}
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>
);
}

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

@ -20,8 +20,8 @@ export default function Home() {
<Navbar />
<Page1 page={1} />
<Page2 page={2} />
<Page3 page={3} />
<Page4 page={4} />
{/* <Page3 page={3} /> */}
{/* <Page4 page={4} /> */}
<Page5 page={5} />
<Page6 page={6} />
<Page7 page={7} />

Loading…
Cancel
Save