{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\user\\\\Desktop\\\\000newport\\\\src\\\\components\\\\pages\\\\home\\\\components\\\\03competance\\\\components\\\\tekno.js\",\n _s = $RefreshSig$();\nimport React from \"react\";\nimport { gsap } from \"gsap\";\nimport { useRef } from \"react\";\nimport { useEffect } from \"react\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst Tekno = () => {\n _s();\n const divRef = useRef(null);\n useEffect(() => {\n const container = divRef.current;\n const trigger = document.querySelectorAll('.technologie');\n // Fonction pour gérer l'effet de défilement\n const handleScroll = () => {\n const scrollPosition = container.scrollTop;\n const textElements = container.querySelectorAll(\".titre_scroll\");\n\n // Ajustez ces valeurs selon vos besoins\n const maxScroll = container.scrollHeight - container.clientHeight;\n const maxSize = 3; // Taille maximale du texte\n const maxOpacity = 1; // Opacité maximale\n\n textElements.forEach(text => {\n const offset = text.offsetTop - scrollPosition;\n const scale = 1 + (maxSize - 1) * (1 - offset / maxScroll);\n const opacity = maxOpacity * (1 - offset / maxScroll);\n gsap.to(text, {\n duration: 0.5,\n scale,\n opacity\n });\n });\n };\n const animateOver = function () {\n const tekno = this.querySelectorAll('.tekno');\n const scrolly = this.querySelectorAll('.scrolly');\n gsap.to(tekno, {\n duration: 1,\n opacity: 0,\n display: 'none'\n });\n gsap.to(scrolly, {\n duration: 1,\n opacity: 1\n });\n };\n const animateOut = function () {\n const tekno = this.querySelectorAll('.tekno');\n const scrolly = this.querySelectorAll('.scrolly');\n gsap.to(tekno, {\n duration: 1,\n opacity: 1,\n display: \"block\"\n });\n gsap.to(scrolly, {\n duration: 1,\n opacity: 0\n });\n };\n trigger.forEach(el => {\n el.addEventListener(\"mouseover\", animateOver, false);\n el.addEventListener(\"touchstart\", animateOver, false);\n el.addEventListener(\"mouseout\", animateOut, false);\n el.addEventListener(\"touchend\", animateOut, false);\n });\n container.addEventListener(\"scroll\", handleScroll);\n return () => {\n container.removeEventListener(\"scroll\", handleScroll);\n trigger.forEach(el => {\n el.removeEventListener(\"mouseover\", animateOver, false);\n el.removeEventListener(\"touchstart\", animateOver, false);\n el.removeEventListener(\"mouseout\", animateOut, false);\n el.removeEventListener(\"touchend\", animateOut, false);\n });\n };\n }, []);\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"text_competence technologie w-1/3 \",\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \" flex flex-col h-full bg-sky-700 relative rounded-3xl \",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"h-96 w-full scrolly overflow-auto custom-scrollbar opacity-0 \",\n ref: divRef,\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl\",\n children: \"REA\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 92,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl\",\n children: \"dd\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 93,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl\",\n children: \"dd\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 94,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl\",\n children: \"dd\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 95,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl\",\n children: \"dd\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 96,\n columnNumber: 11\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl\",\n children: \"dd\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 97,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 91,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"h-1/6 absolute bottom-0 left-0\",\n children: /*#__PURE__*/_jsxDEV(\"h5\", {\n className: \" tekno text-6xl \",\n children: \"tekno\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 101,\n columnNumber: 9\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 99,\n columnNumber: 10\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 90,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 89,\n columnNumber: 5\n }, this);\n};\n_s(Tekno, \"yu+j3H3uMpPkc7UDcPsbvSQj1vE=\");\n_c = Tekno;\nexport default Tekno;\nvar _c;\n$RefreshReg$(_c, \"Tekno\");","map":{"version":3,"names":["React","gsap","useRef","useEffect","jsxDEV","_jsxDEV","Tekno","_s","divRef","container","current","trigger","document","querySelectorAll","handleScroll","scrollPosition","scrollTop","textElements","maxScroll","scrollHeight","clientHeight","maxSize","maxOpacity","forEach","text","offset","offsetTop","scale","opacity","to","duration","animateOver","tekno","scrolly","display","animateOut","el","addEventListener","removeEventListener","className","children","ref","fileName","_jsxFileName","lineNumber","columnNumber","_c","$RefreshReg$"],"sources":["C:/Users/user/Desktop/000newport/src/components/pages/home/components/03competance/components/tekno.js"],"sourcesContent":["import React from \"react\";\r\nimport { gsap } from \"gsap\";\r\nimport { useRef } from \"react\";\r\nimport { useEffect } from \"react\";\r\n\r\nconst Tekno = () => {\r\n\r\n \r\n const divRef = useRef(null);\r\n \r\n useEffect(() => {\r\n const container = divRef.current;\r\n const trigger=document.querySelectorAll('.technologie')\r\n // Fonction pour gérer l'effet de défilement\r\n const handleScroll = () => {\r\n const scrollPosition = container.scrollTop;\r\n const textElements = container.querySelectorAll(\".titre_scroll\");\r\n \r\n // Ajustez ces valeurs selon vos besoins\r\n const maxScroll = container.scrollHeight - container.clientHeight;\r\n const maxSize = 3; // Taille maximale du texte\r\n const maxOpacity = 1; // Opacité maximale\r\n \r\n textElements.forEach((text) => {\r\n const offset = text.offsetTop - scrollPosition;\r\n const scale = 1 + (maxSize - 1) * (1 - offset / maxScroll);\r\n const opacity = maxOpacity * (1 - offset / maxScroll);\r\n \r\n gsap.to(text, {\r\n duration: 0.5,\r\n scale,\r\n opacity,\r\n });\r\n });\r\n \r\n };\r\n const animateOver=function(){\r\n const tekno =this.querySelectorAll('.tekno')\r\n const scrolly =this.querySelectorAll('.scrolly')\r\n gsap.to(tekno,{\r\n duration:1,\r\n opacity:0,\r\n display:'none'\r\n })\r\n gsap.to(scrolly,{\r\n duration:1,\r\n opacity:1\r\n })\r\n }\r\n\r\n const animateOut=function(){\r\n\r\n const tekno =this.querySelectorAll('.tekno')\r\n const scrolly =this.querySelectorAll('.scrolly')\r\n gsap.to(tekno,{\r\n duration:1,\r\n opacity:1,\r\n display:\"block\"\r\n })\r\n gsap.to(scrolly,{\r\n duration:1,\r\n opacity:0\r\n })\r\n\r\n }\r\n trigger.forEach((el) => {\r\n el.addEventListener(\"mouseover\", animateOver, false);\r\n el.addEventListener(\"touchstart\", animateOver, false);\r\n el.addEventListener(\"mouseout\", animateOut, false);\r\n el.addEventListener(\"touchend\", animateOut, false);\r\n });\r\n \r\n container.addEventListener(\"scroll\", handleScroll);\r\n \r\n return () => {\r\n container.removeEventListener(\"scroll\", handleScroll);\r\n trigger.forEach((el) => {\r\n el.removeEventListener(\"mouseover\", animateOver, false);\r\n el.removeEventListener(\"touchstart\", animateOver, false);\r\n el.removeEventListener(\"mouseout\", animateOut, false);\r\n el.removeEventListener(\"touchend\", animateOut, false);\r\n });\r\n };\r\n }, []);\r\n\r\n\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
REA
\r\n
dd
\r\n
dd
\r\n
dd
\r\n
dd
\r\n
dd
\r\n
\r\n
\r\n\r\n
tekno
\r\n
\r\n
\r\n {/* \r\n
\r\n\r\n

Les technos que j'utilise la plupart du temps sont : \r\n

\r\n \r\n\r\n
*/}\r\n
\r\n );\r\n};\r\n\r\nexport default Tekno;\r\n"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}