{"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\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 const scroller = document.querySelector;\n const animateOver = function () {\n const tekno = docu.querySelectorAll('.tekno');\n const scrolly = this.querySelectorAll('.scrolly');\n gsap.to(tekno, {\n duration: 1,\n opacity: 0\n });\n gsap.to(scrolly, {\n duration: 1,\n opacity: 1\n });\n };\n };\n container.addEventListener(\"scroll\", handleScroll);\n return () => {\n container.removeEventListener(\"scroll\", handleScroll);\n };\n }, []);\n return /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"text_competence w-1/3 \",\n children: /*#__PURE__*/_jsxDEV(\"div\", {\n className: \" flex flex-col h-full bg-sky-700 rounded-3xl \",\n children: [/*#__PURE__*/_jsxDEV(\"div\", {\n className: \"h-5/6 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: \"dd\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 63,\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: 64,\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: 65,\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: 66,\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: 67,\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: 68,\n columnNumber: 11\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 62,\n columnNumber: 9\n }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n className: \"h-1/6\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 70,\n columnNumber: 10\n }, this), /*#__PURE__*/_jsxDEV(\"h5\", {\n className: \" tekno text-6xl\",\n children: \"tekno\"\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 71,\n columnNumber: 9\n }, this)]\n }, void 0, true, {\n fileName: _jsxFileName,\n lineNumber: 61,\n columnNumber: 7\n }, this)\n }, void 0, false, {\n fileName: _jsxFileName,\n lineNumber: 60,\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","handleScroll","scrollPosition","scrollTop","textElements","querySelectorAll","maxScroll","scrollHeight","clientHeight","maxSize","maxOpacity","forEach","text","offset","offsetTop","scale","opacity","to","duration","scroller","document","querySelector","animateOver","tekno","docu","scrolly","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 \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 const scroller=document.querySelector\r\n const animateOver=function(){\r\n const tekno =docu.querySelectorAll('.tekno')\r\n const scrolly =this.querySelectorAll('.scrolly')\r\n gsap.to(tekno,{\r\n duration:1,\r\n opacity:0\r\n })\r\n gsap.to(scrolly,{\r\n duration:1,\r\n opacity:1\r\n })\r\n }\r\n };\r\n \r\n container.addEventListener(\"scroll\", handleScroll);\r\n \r\n return () => {\r\n container.removeEventListener(\"scroll\", handleScroll);\r\n };\r\n }, []);\r\n\r\n\r\n\r\n return (\r\n
\r\n
\r\n
\r\n
dd
\r\n
dd
\r\n
dd
\r\n
dd
\r\n
dd
\r\n
dd
\r\n
\r\n
\r\n
tekno
\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":[]}