From 452abb87be8c59c5ce84aef469e9beb626367240 Mon Sep 17 00:00:00 2001 From: Anshuman Date: Thu, 18 Jan 2024 16:18:52 +0530 Subject: [PATCH] Some improvemets by Anshuman Arya on Home page --- index.html | 1 + package-lock.json | 6 +++ package.json | 1 + src/App.jsx | 22 ++++++++-- src/Components/Circle.jsx | 78 ++++++++++++++++++++++++++++++++++++ src/Components/ContactUs.jsx | 2 +- src/index.css | 35 +++++++++++----- src/main.jsx | 1 + yarn.lock | 22 +++++++--- 9 files changed, 148 insertions(+), 20 deletions(-) create mode 100644 src/Components/Circle.jsx diff --git a/index.html b/index.html index fe695e3..f1c62a1 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,7 @@ +
diff --git a/package-lock.json b/package-lock.json index 307c864..a1de3dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@reduxjs/toolkit": "^2.0.1", "aos": "^2.3.4", "bootstrap": "^5.3.2", + "gsap": "^3.12.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^9.1.0", @@ -2735,6 +2736,11 @@ "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", "dev": true }, + "node_modules/gsap": { + "version": "3.12.4", + "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.4.tgz", + "integrity": "sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ==" + }, "node_modules/has-bigints": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz", diff --git a/package.json b/package.json index dc0b92d..7144546 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@reduxjs/toolkit": "^2.0.1", "aos": "^2.3.4", "bootstrap": "^5.3.2", + "gsap": "^3.12.4", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^9.1.0", diff --git a/src/App.jsx b/src/App.jsx index c634bdf..df281e9 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,8 +1,10 @@ -import { BrowserRouter as Router, Routes, Route } from "react-router-dom" +import React, { useEffect } from 'react'; +import gsap from 'gsap'; +import { ScrollTrigger } from 'gsap/ScrollTrigger'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Devmate from "./Pages/Devmate"; import Aos from "aos"; import "aos/dist/aos.css" -import React from "react"; import Header from "./Components/Header"; import Hero from "./Components/Hero"; import About from "./Components/About"; @@ -14,9 +16,21 @@ import Team from "./Components/Team"; import FAQs from "./Components/FAQs"; import ContactUs from "./Components/ContactUs"; import Footer from "./Components/Footer"; +import Circle from "./Components/Circle"; + +gsap.registerPlugin(ScrollTrigger); function App() { React.useEffect(() => { + gsap.to('body', { + backgroundColor: '#E2A9FF', + scrollTrigger: { + trigger: 'body', + start: 'top top', + end: 'bottom bottom', + scrub: true, + }, + }); Aos.init() }, []) return ( @@ -38,6 +52,7 @@ function Home() { <>
+ @@ -52,4 +67,5 @@ function Home() { ) } -export default App \ No newline at end of file +export default App + diff --git a/src/Components/Circle.jsx b/src/Components/Circle.jsx new file mode 100644 index 0000000..a4bff19 --- /dev/null +++ b/src/Components/Circle.jsx @@ -0,0 +1,78 @@ +import React, { useState, useEffect, useRef } from "react"; +import gsap from "gsap"; + +const Circle = () => { + const [position, setPosition] = useState({ x: 0, y: 0 }); + const circleRef = useRef(null); + + useEffect(() => { + const updateMousePosition = (e) => { + setTimeout(() => { + setPosition({ x: e.clientX, y: e.clientY }); + }, 100); + }; + + const onMouseEnterNavbar = () => { + gsap.to(circleRef.current, { + scale: 3, + backgroundColor: "#B98BD0" + }); + + gsap.to(".navbar a:hover", { + color: "#3C0982", + fontWeight: "900", + fontSize: "1.4vw", + zIndex: 100, + duration: 0.1, + }); + + gsap.to(".navbar a:hover", { + x: gsap.utils.lerp(-20, 20, val), + duration: 0.2, + scale: 1 + }); + }; + + const onMouseLeaveNavbar = () => { + gsap.to(circleRef.current, { + scale: 1, + backgroundColor: "#ff0000", + }); + + gsap.to(".navbar a", { + color: "#010483", + fontWeight: 500, + duration: 0.1, + fontSize:"1vw", + scale: 1 + }); + }; + + window.addEventListener("mousemove", updateMousePosition); + + const navbarLinks = document.querySelectorAll(".navbar a"); + navbarLinks.forEach(link => { + link.addEventListener("mouseenter", onMouseEnterNavbar); + link.addEventListener("mouseleave", onMouseLeaveNavbar); + }); + + return () => { + window.removeEventListener("mousemove", updateMousePosition); + navbarLinks.forEach(link => { + link.removeEventListener("mouseenter", onMouseEnterNavbar); + link.removeEventListener("mouseleave", onMouseLeaveNavbar); + }); + }; + }, []); + + + return ( +
+ ); +}; + +export default Circle; diff --git a/src/Components/ContactUs.jsx b/src/Components/ContactUs.jsx index 2fe730a..8c418e0 100644 --- a/src/Components/ContactUs.jsx +++ b/src/Components/ContactUs.jsx @@ -40,7 +40,7 @@ export default function ContactUs() {
- +
diff --git a/src/index.css b/src/index.css index 5e411a1..c09a034 100644 --- a/src/index.css +++ b/src/index.css @@ -4,6 +4,18 @@ @import 'bootstrap/dist/css/bootstrap.min.css'; +/* Just trying */ +.Circle{ + position: fixed; + width: 1.5vw; + height: 1.5vw; + background-color: #ff0000; + border-radius: 50%; + transform: translate(-50%, -50%); + pointer-events: none; + z-index: 99; +} + /* width */ ::-webkit-scrollbar { width: 5px; @@ -216,7 +228,6 @@ z-index: 997; transition: all 0.5s; background: rgba(1, 4, 136, 0.9); - } #header.header-transparent { @@ -270,6 +281,7 @@ * Desktop Navigation */ .navbar { + z-index: 100; padding: 0; } @@ -326,12 +338,12 @@ width: 25px; } - .navbar a:hover, + /* .navbar a:hover, .navbar .active, .navbar .active:focus, - .navbar li:hover>a { + .navbar li:hover>a { */ /* color: #fff; */ - } + /* } */ .navbar .dropdown ul { display: block; @@ -833,7 +845,7 @@ margin: 0 0 5px 0; letter-spacing: 2px; text-transform: uppercase; - color: #aaaaaa; + color: #040249; font-family: "Poppins", sans-serif; } @@ -1095,8 +1107,10 @@ display: flex; align-items: center; padding: 20px; - background: #f5f5ff; + background: none; + box-shadow: -1px -1px 5px; transition: ease-in-out 0.3s; + border-radius: 20px; } .features .icon-box i { @@ -1130,7 +1144,7 @@ # Counts --------------------------------------------------------------*/ .counts { - background: #f5f5ff; + /* background: #f5f5ff; */ padding: 70px 0 60px; } @@ -1140,7 +1154,8 @@ width: 100%; position: relative; text-align: center; - background: #fff; + background: #4f3498; + color: white; } .counts .count-box i { @@ -1617,7 +1632,7 @@ --------------------------------------------------------------*/ .contact .info { width: 100%; - background: #fff; + /* background: #fff; */ } .contact .info i { @@ -1759,7 +1774,7 @@ transform: rotate(360deg); } } - + /*-------------------------------------------------------------- # Footer --------------------------------------------------------------*/ diff --git a/src/main.jsx b/src/main.jsx index 4c2298e..1fbd160 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' import { Provider } from 'react-redux' +import { gsap, Expo } from "gsap" // import { store } from './redux/store.js' ReactDOM.createRoot(document.getElementById('root')).render( diff --git a/yarn.lock b/yarn.lock index a5aa3f4..0c344cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -218,10 +218,10 @@ "@babel/helper-validator-identifier" "^7.22.20" to-fast-properties "^2.0.0" -"@esbuild/win32-x64@0.19.11": +"@esbuild/darwin-arm64@0.19.11": version "0.19.11" - resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.11.tgz" - integrity sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw== + resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.11.tgz" + integrity sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ== "@eslint-community/eslint-utils@^4.2.0": version "4.4.0" @@ -364,10 +364,10 @@ resolved "https://registry.npmjs.org/@remix-run/router/-/router-1.14.2.tgz" integrity sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg== -"@rollup/rollup-win32-x64-msvc@4.9.5": +"@rollup/rollup-darwin-arm64@4.9.5": version "4.9.5" - resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.9.5.tgz" - integrity sha512-1q+mykKE3Vot1kaFJIDoUFv5TuW+QQVaf2FmTT9krg86pQrGStOSJJ0Zil7CFagyxDuouTepzt5Y5TVzyajOdQ== + resolved "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.9.5.tgz" + integrity sha512-ndoXeLx455FffL68OIUrVr89Xu1WLzAG4n65R8roDlCoYiQcGGg6MALvs2Ap9zs7AHg8mpHtMpwC8jBBjZrT/w== "@types/babel__core@^7.20.5": version "7.20.5" @@ -1219,6 +1219,11 @@ fs.realpath@^1.0.0: resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== +fsevents@~2.3.2, fsevents@~2.3.3: + version "2.3.3" + resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz" + integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== + function-bind@^1.1.1, function-bind@^1.1.2: version "1.1.2" resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz" @@ -1337,6 +1342,11 @@ graphemer@^1.4.0: resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz" integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag== +gsap@^3.12.4: + version "3.12.4" + resolved "https://registry.npmjs.org/gsap/-/gsap-3.12.4.tgz" + integrity sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ== + has-bigints@^1.0.1, has-bigints@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz"