diff --git a/src/App.js b/src/App.js index 2384619..0d13445 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,7 @@ import NavMenu from "./Components/NavMenu"; function App() { return ( -
+
diff --git a/src/Components/AboutSection.jsx b/src/Components/AboutSection.jsx index d0dae56..597c763 100644 --- a/src/Components/AboutSection.jsx +++ b/src/Components/AboutSection.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useRef, useState } from 'react'; import {motion, useScroll, useMotionValueEvent, useAnimationControls, useTransform} from "framer-motion" import yachtImg from "../Images/yacht.jpg" import stock_man_img from "../Images/stock_about_placeholder.jpg" @@ -7,139 +7,179 @@ import telegram_icon from "../Images/telegram_icon.png" const AboutSection = () => { const { scrollYProgress } = useScroll(); + const serviceBlockRef = useRef(null); + const {serviceScrollYProgress} = useScroll( + { + target: serviceBlockRef, + offset: ["end end", "start start"], + } + ); const menu_offset = useTransform(scrollYProgress, [0,1], ["-100%", "0%"]); + const service_offset = useTransform(scrollYProgress, [0.6,0.8], ["0%", "-20%"]); + const private_offset = useTransform(scrollYProgress, [0.6,0.8], ["0%", "30%"]); // const menu_offset2 = useTransform(scrollYProgress, [0,1], ["-50%", "0%"]); return ( <>
yacht
-
-
-
-

- Консьерж-сервис для VIP клиентов -

+
+
+
+
+
+

+ Консьерж-сервис для VIP клиентов +

+
+
+

+ Добро пожаловать в мир непревзойденной роскоши и удобства. +

+
+
-
-

- Добро пожаловать в мир непревзойденной роскоши и удобства. -

-
-
-
-
-
- - Lorem ipsum - - - Lorem ipsum - - - Lorem ipsum - -
-
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Placeat tempore aperiam perspiciatis et rerum perferendis harum, - repudiandae recusandae minus, quia optio! Voluptatem animi voluptate quia! Sed rem perferendis nesciunt et? -
-
-
+
+
+ + Lorem ipsum + + + Lorem ipsum + + + Lorem ipsum + +
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Placeat tempore aperiam perspiciatis et rerum perferendis harum, + repudiandae recusandae minus, quia optio! Voluptatem animi voluptate quia! Sed rem perferendis nesciunt et? +
+
+
-
-
-
- man -
-
- Lorem ipsum dolor sit amet consectetur adipisicing elit. - Placeat tempore aperiam perspiciatis et rerum perferendis harum, - repudiandae recusandae minus, quia optio! Voluptatem animi voluptate quia! Sed rem perferendis nesciunt et? -
-
-
-
-
-
- tile -
-

LUXURY CARS

+
+
+
+ man +
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. + Placeat tempore aperiam perspiciatis et rerum perferendis harum, + repudiandae recusandae minus, quia optio! Voluptatem animi voluptate quia! Sed rem perferendis nesciunt et? +
-
- tile -
-

FLIGHTS

+
+
+
+ tile +
+

LUXURY CARS

+
+
+
+ tile +
+

FLIGHTS

+
+
+
+ tile +
+

YACHTS

+
+
+
+
+
+ tile +
+ {/*

YACHTS

*/} +
+
-
- tile -
-

YACHTS

+
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Quos fugiat aspernatur neque illo molestias reiciendis quia, + rem tempora repellat consequuntur repellendus provident numquam ipsam dicta laudantium ab, omnis veritatis minima! +

+
+
+ telegram +
-
-
-
- tile -
- {/*

YACHTS

*/} +
+
+ + PRIVATE + +
+ tile +
+ {/*

YACHTS

*/} +
+
+
+
+ + SERVICE + +
+ tile +
+ {/*

YACHTS

*/} +
+
-
-
-
-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. - Quos fugiat aspernatur neque illo molestias reiciendis quia, - rem tempora repellat consequuntur repellendus provident numquam ipsam dicta laudantium ab, omnis veritatis minima! -

-
-
- telegram +
+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. + Quos fugiat aspernatur neque illo molestias reiciendis quia, + rem tempora repellat consequuntur repellendus provident numquam ipsam dicta laudantium ab, omnis veritatis minima! +

-
-
-
-
-

- PRIVATE -

-
- tile -
- {/*

YACHTS

*/} +
+

Если заинтересовались

+
+
+
+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni maiores reiciendis asperiores dolore, + illum doloremque placeat atque libero? Incidunt, itaque esse ea non velit exercitationem autem totam aspernatur ad. Nesciunt. +

+
+
-
-
-

- SERVICE -

-
- tile -
- {/*

YACHTS

*/} +
+
+

+9 999 999-99-99

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quas accusamus quis commodi

-
+
+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quas accusamus quis commodi

+ +
+
-
-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. - Quos fugiat aspernatur neque illo molestias reiciendis quia, - rem tempora repellat consequuntur repellendus provident numquam ipsam dicta laudantium ab, omnis veritatis minima! -

-
); diff --git a/src/Components/NavMenu.jsx b/src/Components/NavMenu.jsx index 86ba9b9..9d4428c 100644 --- a/src/Components/NavMenu.jsx +++ b/src/Components/NavMenu.jsx @@ -47,7 +47,7 @@ const NavMenu = () => { }; return ( <> - 0.0 ? "justify-end":"justify-center")} // initial={{y:100, opacity: 0.1}} // animate={{y: 0, opacity:1.0}} @@ -64,16 +64,16 @@ const NavMenu = () => { initial={{left: "50%", translateX: "-50%", top: "50%", translateY: "-50%"}} animate={animControls} > - О нас - Сервисы - Шаги - Контакты + О нас + Сервисы + {/* Шаги */} + Контакты
- +

SanxPay