From 2e3237cf2d14ef27350667c9c4ceb4de7d94a1d4 Mon Sep 17 00:00:00 2001 From: rodolfo-ferreira Date: Tue, 9 Apr 2024 17:28:30 -0300 Subject: [PATCH] fix: ajustes parte lll MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ajustes overlay menu;melhorado performance da animação da bolinha azul diga oi;ajustado hover da seção cases de sucesso;ajustado o tempo de animação da escrita uau performance;ajustes da animação das brands --- components/header/NavItem.tsx | 3 +- components/ui/BlueBall.tsx | 31 ---- components/ui/BlueBallAnimation.tsx | 63 ++++++++ components/ui/CasesComponentDesktop.tsx | 184 +++++++++++------------ fresh.gen.ts | 4 +- islands/BlueBallAnimation.tsx | 1 + islands/TextWithImageCustom.tsx | 1 - sections/Content/CasesComponent.tsx | 2 +- sections/Content/Hero.tsx | 4 +- sections/Content/TextWithImageCustom.tsx | 49 +----- tailwind.css | 10 +- 11 files changed, 169 insertions(+), 183 deletions(-) delete mode 100644 components/ui/BlueBall.tsx create mode 100644 components/ui/BlueBallAnimation.tsx create mode 100644 islands/BlueBallAnimation.tsx delete mode 100644 islands/TextWithImageCustom.tsx diff --git a/components/header/NavItem.tsx b/components/header/NavItem.tsx index 2bb25d6..2dea319 100644 --- a/components/header/NavItem.tsx +++ b/components/header/NavItem.tsx @@ -92,7 +92,7 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) { gap-6 w-screen top-0 text-primary max-w-[90%] left-[5%] rounded-b-[40px]`, )} style={{ - top: "-5px", + top: "-10px", marginTop: (lasfHeaderHeight + 20) + "px", height: (lasfHeaderHeight + 20) + "px", }} @@ -103,6 +103,7 @@ function NavItem({ item, btnTextMenu, btnUrlMenu }: Props) { ${children.length < 3 ? "flex max-w-[835px]" : ""}`, )} > +
{image?.url && ( -
- - {textCircleSm} - -
- - ); -} - -export default BlueBall; diff --git a/components/ui/BlueBallAnimation.tsx b/components/ui/BlueBallAnimation.tsx new file mode 100644 index 0000000..3796c85 --- /dev/null +++ b/components/ui/BlueBallAnimation.tsx @@ -0,0 +1,63 @@ +import { clx } from "$store/sdk/clx.ts"; + +interface Props { + textCircleLg?: string; + textCircleSm?: string; +} + +function BlueBall({ textCircleLg, textCircleSm }: Props) { + + function handleMouseMove(e: MouseEvent) { + const { target } = e; + if (!target) return; + + if (target && target instanceof HTMLElement) { + const smBall = target?.querySelector("#ball-sm"); + const horizontal = e?.layerX; + const vertical = e?.layerY; + + if (horizontal && vertical && smBall) { + smBall?.setAttribute( + "style", + `position:absolute; left: ${horizontal + "px"}; top:${ + vertical + "px" + }`, + ); + } + } + } + + return ( + <> +
+
+ + {textCircleLg} + +
+ + {textCircleSm} + +
+
+
+ + ); +} + +export default BlueBall; diff --git a/components/ui/CasesComponentDesktop.tsx b/components/ui/CasesComponentDesktop.tsx index 7d8e857..df36009 100644 --- a/components/ui/CasesComponentDesktop.tsx +++ b/components/ui/CasesComponentDesktop.tsx @@ -36,71 +36,89 @@ interface Props { settingsImage?: PropsImage[]; } +// interface para método dentro do componente +interface PropsFN{ + allCardElement: HTMLCollectionOf; + bgWidth: string; + cardElement:Element; + logoWidth?:string; + bgWidthModeFalse?:string; + widthModeFalse?: string; + device?:string; +} + +function activeCard( {allCardElement, bgWidth, cardElement, logoWidth, bgWidthModeFalse, widthModeFalse, device}:PropsFN ){ + const validActive = allCardElement && Array.from(allCardElement).filter((e) => e?.classList.contains('is-active')); + + if( cardElement ){ + cardElement?.classList.remove("is-active"); + bgWidth && cardElement?.setAttribute("style", `width: ${bgWidth}px`); + + const itemHover = cardElement?.querySelector(".n1-cases-card__item--hover"); + const logoHover = cardElement?.querySelector(".n1-cases-card__logo--hover"); + + bgWidth && itemHover?.style?.width == bgWidth ? bgWidth + "px": device ? (Number(bgWidth) / 2) : bgWidthModeFalse; + logoWidth && logoHover?.setAttribute("style", `width: ${logoWidth}px`); + + allCardElement && Array.from(allCardElement).forEach((e, i) => { + if(e && i === 0 && validActive && Object.assign(validActive).length === 0 ){ + const logo = e.querySelector('.logo-width-hover')?.dataset?.logowidthhover; + const widthEl = e.querySelector('.bg-width-hover')?.dataset?.bgwidthhover; + + const selectorItem = e.querySelector(".n1-cases-card__item--hover"); + const selectorlogo = e.querySelector(".n1-cases-card__logo--hover"); + + e?.classList.add("is-active"); + widthEl && e.setAttribute("style", `width: ${device ? (Number(widthEl) / 1.7) + 'px' : widthEl + 'px' }`); + widthEl && selectorItem?.style?.width == widthEl ? widthEl + "px" : device ? (Number(widthEl)) + "px" : widthModeFalse; + !device && logo && selectorlogo?.setAttribute("style", `width: ${logo}px`); + } + }); + } +} + function CasesComponentDesktop({ settingsImage }: Props) { + function handleMouserHover(e: MouseEvent) { const { target } = e; const modeDesktop = globalThis.matchMedia("(min-width: 1281px)").matches; - const modePortatil = - globalThis.matchMedia("(min-width:1024px) and (max-width: 1280px)") - .matches; - const modeTablet = - globalThis.matchMedia("(min-width:768px) and (max-width: 1024px)") - .matches; + const modePortatil = globalThis.matchMedia("(min-width:1024px) and (max-width: 1280px)").matches; + const modeTablet = globalThis.matchMedia("(min-width:768px) and (max-width: 1024px)").matches; if (!target) return; if (target && target instanceof HTMLElement) { const cardElement = target?.closest(".n1-cases-card"); - const allCardElement = cardElement && - cardElement.parentElement?.getElementsByClassName("n1-cases-card"); + const allCardElement = cardElement && cardElement.parentElement?.getElementsByClassName("n1-cases-card"); - allCardElement && Array.from(allCardElement).forEach((e) => { + allCardElement && Array.from(allCardElement).forEach((e, i) => { e?.classList.remove("is-active"); - e?.setAttribute("style", "width: 300px"); + e?.setAttribute("style", "width: 300px"); }); - const bgWidth = cardElement?.querySelector(".bg-width") - ?.dataset.bgwidth; - const bgWidthHover = cardElement?.querySelector( - ".bg-width-hover", - )?.dataset.bgwidthhover; - const logoWidth = cardElement?.querySelector(".logo-width") - ?.dataset.logowidth; - const logoWidthHover = cardElement?.querySelector( - ".logo-width-hover", - )?.dataset.logowidthhover; + const bgWidth = cardElement?.querySelector(".bg-width")?.dataset.bgwidth; + const bgWidthHover = cardElement?.querySelector(".bg-width-hover")?.dataset.bgwidthhover; + const logoWidth = cardElement?.querySelector(".logo-width")?.dataset.logowidth; + const logoWidthHover = cardElement?.querySelector(".logo-width-hover")?.dataset.logowidthhover; if (modeDesktop) { switch (e.type) { case "mouseleave": - cardElement?.classList.remove("is-active"); - bgWidth && - cardElement?.setAttribute("style", `width: ${bgWidth}px`); - bgWidth && - cardElement?.querySelector( - ".n1-cases-card__item--hover", - )?.style?.width == bgWidth - ? bgWidth + "px" - : "300px"; - logoWidth && - cardElement?.querySelector( - ".n1-cases-card__logo--hover", - )?.setAttribute("style", `width: ${logoWidth}px`); + + setTimeout(()=>{ + const bgWidthModeFalse = '300px'; + const widthModeFalse = '560px'; + if(allCardElement && bgWidth && cardElement && logoWidth){ + activeCard( { allCardElement, bgWidth, cardElement, logoWidth, bgWidthModeFalse, widthModeFalse } ); + } + }, 500); + break; case "mouseover": cardElement?.classList.add("is-active"); - bgWidthHover && - cardElement?.setAttribute("style", `width: ${bgWidthHover}px`); - bgWidthHover && - cardElement?.querySelector( - ".n1-cases-card__item--hover", - )?.style?.width == bgWidthHover - ? bgWidthHover + "px" - : "560px"; - logoWidthHover && - cardElement?.querySelector( - ".n1-cases-card__logo--hover", - )?.setAttribute("style", `width: ${logoWidthHover}px`); + bgWidthHover && cardElement?.setAttribute("style", `width: ${bgWidthHover}px`); + bgWidthHover && cardElement?.querySelector(".n1-cases-card__item--hover")?.style?.width == bgWidthHover ? bgWidthHover + "px": "560px"; + logoWidthHover && cardElement?.querySelector(".n1-cases-card__logo--hover")?.setAttribute("style", `width: ${logoWidthHover}px`); break; } } @@ -108,33 +126,21 @@ function CasesComponentDesktop({ settingsImage }: Props) { if (modePortatil) { switch (e.type) { case "mouseleave": - cardElement?.classList.remove("is-active"); - bgWidth && - cardElement?.setAttribute("style", `width: ${bgWidth}px`); - bgWidth && - cardElement?.querySelector( - ".n1-cases-card__item--hover", - )?.style?.width == bgWidth - ? (Number(bgWidth) / 2) + "px" - : "300px"; - logoWidth && - cardElement?.querySelector( - ".n1-cases-card__logo--hover", - )?.setAttribute("style", `width: ${logoWidth}px`); + setTimeout(()=>{ + const bgWidthModeFalse = '300px'; + const widthModeFalse = '360px'; + const device = 'portatil' + + if(allCardElement && bgWidth && cardElement){ + activeCard( { allCardElement, bgWidth, cardElement, bgWidthModeFalse, widthModeFalse, device } ); + } + }, 500); + break; case "mouseover": cardElement?.classList.add("is-active"); - bgWidthHover && - cardElement?.setAttribute( - "style", - `width: ${Number(bgWidthHover) / 1.7}px`, - ); - bgWidthHover && - cardElement?.querySelector( - ".n1-cases-card__item--hover", - )?.style?.width == bgWidthHover - ? (Number(bgWidthHover)) + "px" - : "360px"; + bgWidthHover && cardElement?.setAttribute("style",`width: ${Number(bgWidthHover) / 1.7}px`); + bgWidthHover && cardElement?.querySelector(".n1-cases-card__item--hover")?.style?.width == bgWidthHover ? (Number(bgWidthHover)) + "px" : "360px"; break; } } @@ -142,33 +148,21 @@ function CasesComponentDesktop({ settingsImage }: Props) { if (modeTablet) { switch (e.type) { case "mouseleave": - cardElement?.classList.remove("is-active"); - bgWidth && - cardElement?.setAttribute("style", `width: ${bgWidth}px`); - bgWidth && - cardElement?.querySelector( - ".n1-cases-card__item--hover", - )?.style?.width == bgWidth - ? (Number(bgWidth) / 2) + "px" - : "300px"; - logoWidth && - cardElement?.querySelector( - ".n1-cases-card__logo--hover", - )?.setAttribute("style", `width: ${logoWidth}px`); + setTimeout(()=>{ + const bgWidthModeFalse = '300px'; + const widthModeFalse = '360px'; + const device = 'tablet' + + if(allCardElement && bgWidth && cardElement){ + activeCard( { allCardElement, bgWidth, cardElement, bgWidthModeFalse, widthModeFalse, device } ); + } + }, 500); + break; case "mouseover": cardElement?.classList.add("is-active"); - bgWidthHover && - cardElement?.setAttribute( - "style", - `width: ${Number(bgWidthHover) / 1.7}px`, - ); - bgWidthHover && - cardElement?.querySelector( - ".n1-cases-card__item--hover", - )?.style?.width == bgWidthHover - ? (Number(bgWidthHover)) + "px" - : "360px"; + bgWidthHover && cardElement?.setAttribute("style",`width: ${Number(bgWidthHover) / 1.7}px`); + bgWidthHover && cardElement?.querySelector(".n1-cases-card__item--hover")?.style?.width == bgWidthHover ? (Number(bgWidthHover)) + "px" : "360px"; break; } } @@ -208,7 +202,7 @@ function CasesComponentDesktop({ settingsImage }: Props) { <> diff --git a/fresh.gen.ts b/fresh.gen.ts index b541441..37a9bb4 100644 --- a/fresh.gen.ts +++ b/fresh.gen.ts @@ -10,6 +10,7 @@ import * as $AddToCartButton_shopify from "./islands/AddToCartButton/shopify.tsx import * as $AddToCartButton_vnda from "./islands/AddToCartButton/vnda.tsx"; import * as $AddToCartButton_vtex from "./islands/AddToCartButton/vtex.tsx"; import * as $AddToCartButton_wake from "./islands/AddToCartButton/wake.tsx"; +import * as $BlueBallAnimation from "./islands/BlueBallAnimation.tsx"; import * as $CasesComponent from "./islands/CasesComponent.tsx"; import * as $ContactForm from "./islands/ContactForm.tsx"; import * as $Header_Buttons from "./islands/Header/Buttons.tsx"; @@ -29,7 +30,6 @@ import * as $ProductImageZoom from "./islands/ProductImageZoom.tsx"; import * as $SearchControls from "./islands/SearchControls.tsx"; import * as $ShippingSimulation from "./islands/ShippingSimulation.tsx"; import * as $SliderJS from "./islands/SliderJS.tsx"; -import * as $TextWithImageCustom from "./islands/TextWithImageCustom.tsx"; import * as $WishlistButton_vtex from "./islands/WishlistButton/vtex.tsx"; import * as $WishlistButton_wake from "./islands/WishlistButton/wake.tsx"; import { type Manifest } from "$fresh/server.ts"; @@ -46,6 +46,7 @@ const manifest = { "./islands/AddToCartButton/vnda.tsx": $AddToCartButton_vnda, "./islands/AddToCartButton/vtex.tsx": $AddToCartButton_vtex, "./islands/AddToCartButton/wake.tsx": $AddToCartButton_wake, + "./islands/BlueBallAnimation.tsx": $BlueBallAnimation, "./islands/CasesComponent.tsx": $CasesComponent, "./islands/ContactForm.tsx": $ContactForm, "./islands/Header/Buttons.tsx": $Header_Buttons, @@ -65,7 +66,6 @@ const manifest = { "./islands/SearchControls.tsx": $SearchControls, "./islands/ShippingSimulation.tsx": $ShippingSimulation, "./islands/SliderJS.tsx": $SliderJS, - "./islands/TextWithImageCustom.tsx": $TextWithImageCustom, "./islands/WishlistButton/vtex.tsx": $WishlistButton_vtex, "./islands/WishlistButton/wake.tsx": $WishlistButton_wake, }, diff --git a/islands/BlueBallAnimation.tsx b/islands/BlueBallAnimation.tsx new file mode 100644 index 0000000..37280ac --- /dev/null +++ b/islands/BlueBallAnimation.tsx @@ -0,0 +1 @@ +export { default } from "$store/components/ui/BlueBallAnimation.tsx"; \ No newline at end of file diff --git a/islands/TextWithImageCustom.tsx b/islands/TextWithImageCustom.tsx deleted file mode 100644 index 9579d0a..0000000 --- a/islands/TextWithImageCustom.tsx +++ /dev/null @@ -1 +0,0 @@ -export { default } from "$store/sections/Content/TextWithImageCustom.tsx"; diff --git a/sections/Content/CasesComponent.tsx b/sections/Content/CasesComponent.tsx index 01c9418..69d6880 100644 --- a/sections/Content/CasesComponent.tsx +++ b/sections/Content/CasesComponent.tsx @@ -55,7 +55,7 @@ interface PropsImage { heightLogoHover?: number; /**@title Imagem de fundo (efeito hover)*/ imageBackgroundHover?: ImageWidget; - /**@title Larugura da imagem de fundo (efeito hover) */ + /**@title Largura da imagem de fundo (efeito hover) */ /**@description (ex: 300) */ widthImageBackgroundHover?: number; /**@title Altura da imagem de fundo (efeito hover) */ diff --git a/sections/Content/Hero.tsx b/sections/Content/Hero.tsx index de5d07f..e6aa0a1 100644 --- a/sections/Content/Hero.tsx +++ b/sections/Content/Hero.tsx @@ -112,11 +112,11 @@ export default function HeroFlats( textElement.classList.add("is-active"); textElement.innerHTML = textArray[word]; - setTimeout(typingWrite, 3000); + setTimeout(typingWrite, 4000); setTimeout(() => { textElement.innerHTML = ""; textElement.classList.remove("is-active"); - }, 2950); + }, 3950); } } } diff --git a/sections/Content/TextWithImageCustom.tsx b/sections/Content/TextWithImageCustom.tsx index 2df014b..befbd3b 100644 --- a/sections/Content/TextWithImageCustom.tsx +++ b/sections/Content/TextWithImageCustom.tsx @@ -1,6 +1,6 @@ import type { ImageWidget } from "apps/admin/widgets.ts"; import { clx } from "$store/sdk/clx.ts"; -// import BlueBall from "$store/components/ui/BlueBall.tsx"; +import BlueBall from "$store/components/ui/BlueBallAnimation.tsx"; interface Props { /**@title Imagem */ @@ -20,25 +20,6 @@ interface Props { function TextWithImageCustom( { image, width, height, textLarge, textCircleLg, textCircleSm }: Props, ) { - function handleMouseMove(e: MouseEvent) { - const { target } = e; - if (!target) return; - - if (target && target instanceof HTMLElement) { - const smBall = target?.querySelector("#ball-sm"); - const horizontal = e?.layerX; - const vertical = e?.layerY; - - if (horizontal && vertical && smBall) { - smBall?.setAttribute( - "style", - `position:absolute; left: ${horizontal + "px"}; top:${ - vertical + "px" - }`, - ); - } - } - } return ( <> @@ -70,33 +51,7 @@ function TextWithImageCustom( /> )} {textCircleLg && textCircleSm && ( -
-
- - {textCircleLg} - -
- - {textCircleSm} - -
-
-
+ )} diff --git a/tailwind.css b/tailwind.css index c73cedc..182d657 100644 --- a/tailwind.css +++ b/tailwind.css @@ -118,7 +118,7 @@ } - .n1-header__navlink--active.is-active:hover .n1-submenu-children__container:before{ + .n1-header__navlink--active.is-active .n1-submenu-children__overlay:before{ content: ""; position: fixed; top: 80px; @@ -132,6 +132,10 @@ transition: all 2s linear; } + .n1-header__navlink--active.is-active .n1-submenu-children__overlay:hover:before{ + content: initial !important; + } + .moveFromTop:hover { transform: translateY(20px) } /* ESTILIZAÇÃO COLLAPSE DO MENU MOBILE ______________________________________________________________| INICIAL | */ @@ -248,7 +252,7 @@ border-right: 0.15em solid #3CCBDA; white-space: nowrap; max-width:max-content; - animation: typingText 1.5s steps(13, end) alternate infinite, blinkBorder .75s step-end infinite; + animation: typingText 2s steps(13, end) alternate infinite, blinkBorder .75s step-end infinite; } @keyframes typingText { @@ -267,7 +271,7 @@ /* ESTILIZAÇÃO ANIMAÇÃO DA MARCA ______________________________________________________________________| INICIAL | */ .animation-section-brand{ - animation: slide 10s linear infinite; + animation: slide 30s linear infinite; } @keyframes slide {