This is my app.js
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./App.css";
import Home from "./Home";
import Navbar from "./Navbar";
import Works from "./Works";
function App() {
return (
<>
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/works" element={<Works />} />
</Routes>
</Router>
</>
);
}
export default App;
This is my Home.js
import React, { useEffect, useState } from "react";
import "./App.css";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
import "./mainpage.css";
import cloud1 from "./images/cloud1.svg";
import cloud02 from "./images/cloud02.svg";
import cloud2 from "./images/cloud2.svg";
import moon from "./images/moon.svg";
import cloud3 from "./images/cloud3.svg";
import cloud01 from "./images/cloud01.svg";
import { useNavigate } from "react-router-dom";
import {
MouseParallaxChild,
MouseParallaxContainer,
} from "react-parallax-mouse";
import Navbar from "./Navbar";
function Home() {
let navigate = useNavigate();
const [loading, setloading] = useState(false);
useEffect(() => {
setloading(true);
setTimeout(() => {
setloading(false);
}, 1000);
}, []);
return (
<MouseParallaxContainer className="App">
{loading ? (
<ClimbingBoxLoader size={20} color={"#F37A24"} loading={loading} />
) : (
<MouseParallaxContainer
className="main-page"
containerStyles={{
width: "100%",
overflow: "none",
}}
>
<Navbar />
<h1 className="heading">SASWATA</h1>
<h1 className="heading2">GHOSH</h1>
<span className="bar1"></span>
<span className="bar2"></span>
<p className="para">web developer</p>
<p className="scrolldown">SCROLL DOWN</p>
<span className="verticaline"></span>
<MouseParallaxContainer
className="moon"
containerStyles={{
width: "100%",
overflow: "none",
}}
>
<MouseParallaxChild
className="moon_text"
factorX={0.01}
factorY={0.01}
>
<p>PORTFOLIO</p>
</MouseParallaxChild>
<MouseParallaxChild
className="moon_img"
factorX={0.03}
factorY={0.05}
>
<img src={moon} alt="" />
</MouseParallaxChild>
<MouseParallaxChild
className="cloud01"
factorX={0.04}
factorY={0.06}
>
<img src={cloud01} alt="" />
</MouseParallaxChild>
<MouseParallaxChild
className="cloud02"
factorX={0.03}
factorY={0.05}
>
<img src={cloud02} alt="" />
</MouseParallaxChild>
<MouseParallaxChild
className="cloud_front1"
factorX={0.04}
factorY={0.07}
>
<img src={cloud1} alt="cloud1" />
</MouseParallaxChild>
<MouseParallaxChild
className="cloud3"
factorX={0.03}
factorY={0.05}
>
<img src={cloud3} alt="" />
</MouseParallaxChild>
<MouseParallaxChild
className="cloud2"
factorX={0.06}
factorY={0.05}
>
<img src={cloud2} alt="cloud2" />
</MouseParallaxChild>
</MouseParallaxContainer>
<div className="nav-left">
<span className="span1"></span>
<span className="span2"></span>
<span className="span3"></span>
<span className="span4"></span>
</div>
</MouseParallaxContainer>
)}
</MouseParallaxContainer>
);
}
export default Home;
This is my Works.js
import React, { useEffect, useState } from "react";
import "./App.css";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
import "./Works.css";
import cloud02 from "./images/cloud02.svg";
import works from "./images/LandingPage.png";
import { useNavigate } from "react-router-dom";
import cloud01 from "./images/cloud01.svg";
import {
MouseParallaxChild,
MouseParallaxContainer,
} from "react-parallax-mouse";
import Navbar from "./Navbar";
function Home() {
let navigate = useNavigate();
const [loading, setloading] = useState(false);
useEffect(() => {
setloading(true);
setTimeout(() => {
setloading(false);
}, 1000);
}, []);
return (
<MouseParallaxContainer className="App">
<MouseParallaxContainer
className="main-page"
containerStyles={{
width: "100%",
overflow: "none",
}}
>
<Navbar />
<h1 className="heading">
Web Sec<span className="name-span">urity</span>
</h1>
<h1 className="heading2">Project</h1>
<span className="bar1"></span>
<span className="bar2"></span>
<p className="para">website</p>
<MouseParallaxContainer
className="moon"
containerStyles={{
width: "100%",
overflow: "none",
}}
>
<MouseParallaxChild className="cloud01" factorX={0.04} factorY={0.06}>
<img src={cloud01} alt="" />
</MouseParallaxChild>
<img className="works-img" src={works} alt="" />
</MouseParallaxContainer>
<div className="nav-left">
<span className="span11"></span>
<span className="span12"></span>
<span className="span13"></span>
<span className="span14"></span>
</div>
<div className="page-number">
<p>01</p>
</div>
</MouseParallaxContainer>
</MouseParallaxContainer>
);
}
export default Home;
I want to perform mouse slide such that it lands on new page on mouse scroll.
This is the website I am referring.(https://kuon.space/).
It is done using HTML and jquery but I am trying it with React.js and CSS. I hope you can help me. I have tried almost all libraries and couldn’t help myself.
