parent
52c4a373cd
commit
abbc77fc94
11 changed files with 359 additions and 16 deletions
After Width: | Height: | Size: 53 KiB |
@ -0,0 +1,96 @@ |
||||
class scroll { |
||||
homeScrollHandler = (index) => { |
||||
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'); |
||||
} |
||||
}else |
||||
if (index === 2) { |
||||
if (scrollY === 0) { |
||||
return height; |
||||
}
|
||||
if (scrollY > 0 && scrollY < height) { |
||||
return height - scrollY; |
||||
}
|
||||
if(scrollY === 2 * height){ |
||||
return -1 * height; |
||||
} |
||||
}else |
||||
if (index === 3) { |
||||
if (scrollY <= height) { |
||||
return height; |
||||
}
|
||||
if (scrollY > height && scrollY < 2 * height) { |
||||
return 2 * height - scrollY; |
||||
}
|
||||
if(scrollY === 3 * height){ |
||||
return -height; |
||||
} |
||||
}else |
||||
if (index === 4) { |
||||
if (scrollY <= 2 * height) { |
||||
return height; |
||||
} else if (scrollY > 2 * height && scrollY < 3 * height) { |
||||
return 3 * height - scrollY; |
||||
}
|
||||
if(scrollY === 4 * height){ |
||||
return -height; |
||||
} |
||||
}else |
||||
if (index === 5) { |
||||
if (scrollY <= 3 * height) { |
||||
return height; |
||||
} else if (scrollY > 3 * height && scrollY < 4 * height) { |
||||
return 4 * height - scrollY; |
||||
}
|
||||
if(scrollY === 5 * height){ |
||||
return -height; |
||||
} |
||||
}else |
||||
if (index === 6) { |
||||
if (scrollY <= 4 * height) { |
||||
return height; |
||||
} else if (scrollY > 4 * height && scrollY < 5 * height) { |
||||
return 5 * height - scrollY; |
||||
}
|
||||
if(scrollY === 6 * height){ |
||||
return -height; |
||||
} |
||||
|
||||
}else |
||||
if (index === 7) { |
||||
if (scrollY <= 5 * height) { |
||||
return height; |
||||
} else if (scrollY > 5 * height && scrollY < 6 * height) { |
||||
return 6 * height - scrollY; |
||||
}
|
||||
// if(scrollY === 7 * height){
|
||||
// return;
|
||||
// }
|
||||
} |
||||
// if (index !== 1) {
|
||||
// if (scrollY > (index - 2) * height) {
|
||||
// return (index - 1) * height - scrollY;
|
||||
// }
|
||||
// if (scrollY === (index - 1) * height) {
|
||||
// return 0;
|
||||
// }
|
||||
// if (scrollY > (index - 1) * height) {
|
||||
// return -height;
|
||||
// }
|
||||
// }
|
||||
}; |
||||
} |
||||
|
||||
const _scroll = new scroll(); |
||||
|
||||
export default _scroll; |
@ -0,0 +1,28 @@ |
||||
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(() => {
|
||||
window.addEventListener("scroll", (e) => { |
||||
setTop(scroll.homeScrollHandler(page)); |
||||
}); |
||||
}, []); |
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
[ |
||||
"h-screen w-full pt-20 fixed left-0 bg-gray-200", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ top: top }} |
||||
> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
|
@ -0,0 +1,28 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import _ from "lodash"; |
||||
import scroll from "../../../utils/scroll"; |
||||
|
||||
|
||||
export default function Page3({ list, page }) { |
||||
const [top, setTop] = useState(window.innerHeight); |
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", (e) => { |
||||
setTop(scroll.homeScrollHandler(page)); |
||||
}); |
||||
}, []); |
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
[ |
||||
"fixed left-0 h-screen w-full pt-20 bg-gray-300", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ top: top }} |
||||
> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
|
@ -0,0 +1,29 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import _ from "lodash"; |
||||
import scroll from "../../../utils/scroll"; |
||||
|
||||
|
||||
export default function Page4({ list, page }) { |
||||
const [top, setTop] = useState(window.innerHeight); |
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", (e) => { |
||||
setTop(scroll.homeScrollHandler(page)); |
||||
}); |
||||
}, []); |
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
[ |
||||
"fixed left-0 h-screen w-full pt-20 bg-gray-400", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ top: top }} |
||||
|
||||
> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
|
@ -0,0 +1,28 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import _ from "lodash"; |
||||
import scroll from "../../../utils/scroll"; |
||||
|
||||
|
||||
export default function Page5({ list, page }) { |
||||
const [top, setTop] = useState(window.innerHeight); |
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", (e) => { |
||||
setTop(scroll.homeScrollHandler(page)); |
||||
}); |
||||
}, []); |
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
[ |
||||
"fixed left-0 h-screen w-full pt-20 bg-gray-500", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ top: top }} |
||||
> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
|
@ -0,0 +1,28 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import _ from "lodash"; |
||||
import scroll from "../../../utils/scroll"; |
||||
|
||||
|
||||
export default function Page6({ list, page }) { |
||||
const [top, setTop] = useState(window.innerHeight); |
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", (e) => { |
||||
setTop(scroll.homeScrollHandler(page)); |
||||
}); |
||||
}, []); |
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
[ |
||||
"fixed left-0 h-screen w-full pt-20 bg-gray-600", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ top: top }} |
||||
> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
|
@ -0,0 +1,27 @@ |
||||
import React, { useState, useEffect } from "react"; |
||||
import _ from "lodash"; |
||||
import scroll from "../../../utils/scroll"; |
||||
|
||||
export default function Page7({ list, page }) { |
||||
const [top, setTop] = useState(window.innerHeight); |
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("scroll", (e) => { |
||||
setTop(scroll.homeScrollHandler(page)); |
||||
}); |
||||
}, []); |
||||
return ( |
||||
<div |
||||
className={_.join( |
||||
[ |
||||
"fixed left-0 h-screen w-full pt-20 bg-gray-700", |
||||
], |
||||
" " |
||||
)} |
||||
style={{ top: top }} |
||||
> |
||||
|
||||
</div> |
||||
); |
||||
} |
||||
|
@ -1,18 +1,30 @@ |
||||
import React, {useState} from 'react'; |
||||
import Navbar from '../../components/Navbar'; |
||||
import Dots from '../../components/Dots'; |
||||
import React, { useState, useEffect } from "react"; |
||||
import Navbar from "../../components/Navbar"; |
||||
|
||||
import Page1 from './Page1/index'; |
||||
|
||||
import Page1 from "./Page1"; |
||||
import Page2 from "./Page2"; |
||||
import Page3 from "./Page3"; |
||||
import Page4 from "./Page4"; |
||||
import Page5 from "./Page5"; |
||||
import Page6 from "./Page6"; |
||||
import Page7 from "./Page7"; |
||||
import { set } from "lodash"; |
||||
|
||||
export default function Home() { |
||||
const [page, setPage] = useState(1); |
||||
return ( |
||||
<div className="home w-screen min-h-screen flex flex-col bg-white relative"> |
||||
<Dots count={7} active={page} setPage={setPage} />
|
||||
<div |
||||
className="flex flex-col bg-white relative w-full" |
||||
style={{ height: "700vh" }} |
||||
> |
||||
<Navbar /> |
||||
{ |
||||
page === 1 && <Page1 /> |
||||
} |
||||
<Page1 page={1} /> |
||||
<Page2 page={2} /> |
||||
<Page3 page={3} /> |
||||
<Page4 page={4} /> |
||||
<Page5 page={5} /> |
||||
<Page6 page={6} /> |
||||
<Page7 page={7} />
|
||||
</div> |
||||
) |
||||
); |
||||
} |
||||
|
Loading…
Reference in new issue