lapikud/tipilan
3
0
Fork 0
mirror of https://github.com/Lapikud/tipilan.git synced 2026-09-22 15:22:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove hover scrolling from sponsors

Browse Source
This commit is contained in:
Alacris
2026-09-05 22:52:25 +03:00
parent 70f9e54ce4
commit a2a42da5b6
2 changed files with 47 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/components/HoverTicker.tsx
View File

@@ -1,100 +0,0 @@
"use client";
import { useRef, useEffect, ReactNode } from "react";
interface HoverTickerProps {
children: ReactNode;
className?: string;
baseSpeed?: number;
hoverSpeed?: number;
}
export default function HoverTicker({
children,
className = "",
baseSpeed = 1.2,
hoverSpeed = 3.5,
}: HoverTickerProps) {
const containerRef = useRef<HTMLDivElement>(null);
const mouseZoneRef = useRef<"left" | "right" | "paused" | "none">("none");
useEffect(() => {
const container = containerRef.current;
if (!container) return;
let animationFrameId: number;
const animate = () => {
if (container) {
const zone = mouseZoneRef.current;
if (zone === "none") {
container.scrollLeft += baseSpeed;
} else if (zone === "right") {
container.scrollLeft += hoverSpeed;
} else if (zone === "left") {
container.scrollLeft -= hoverSpeed;
}
// Infinite scroll cycle
const maxScroll = container.scrollWidth / 2;
if (container.scrollLeft >= maxScroll) {
container.scrollLeft -= maxScroll / 2;
} else if (container.scrollLeft <= 0 && (zone === "left" || zone === "paused")) {
container.scrollLeft += maxScroll / 2;
}
}
animationFrameId = requestAnimationFrame(animate);
};
animationFrameId = requestAnimationFrame(animate);
return () => cancelAnimationFrame(animationFrameId);
}, [baseSpeed, hoverSpeed]);
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
const container = containerRef.current;
if (!container) return;
const rect = container.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const width = rect.width;
if (mouseX < width * 0.3) {
mouseZoneRef.current = "left";
} else if (mouseX > width * 0.7) {
mouseZoneRef.current = "right";
} else {
mouseZoneRef.current = "paused";
}
};
const handleMouseLeave = () => {
mouseZoneRef.current = "none";
};
return (
<div
ref={containerRef}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
className={`ticker-container relative overflow-x-auto select-none ${className}`}
>
<div className="flex items-center w-max">
{children}
</div>
<style jsx>{`
.ticker-container {
-ms-overflow-style: none;
scrollbar-width: none;
}
.ticker-container::-webkit-scrollbar {
display: none;
}
`}</style>
</div>
);
}

107
src/components/Sponsors.tsx
View File

@@ -4,7 +4,6 @@ import { vipnagorgialla } from "@/components/Vipnagorgialla";
import { useTranslations } from "next-intl"; import { useTranslations } from "next-intl";
import Image from "next/image"; import Image from "next/image";
import NextLink from "next/link"; import NextLink from "next/link";
import HoverTicker from "@/components/HoverTicker";
interface Sponsor { interface Sponsor {
href: string; href: string;
@@ -163,7 +162,7 @@ const sponsors: Sponsor[] = [
src: "/sponsors/istar.jpg", src: "/sponsors/istar.jpg",
alt: "iStar Kebab", alt: "iStar Kebab",
width: 244, width: 244,
height: 244 height: 244,
}, },
]; ];
@@ -181,65 +180,53 @@ export default function Sponsors({
const t = useTranslations(); const t = useTranslations();
return ( return (
<div <div
className={`flex flex-col w-full xl:h-[414px] mx-auto ${vipnagorgialla.className} font-bold italic border-[#1F5673] ${className}`} className={`flex flex-col w-full xl:h-[414px] mx-auto ${vipnagorgialla.className} font-bold italic border-[#1F5673] ${className}`}
> >
{showTitle && ( {showTitle && (
<h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] text-[#2A2C3F] uppercase text-center px-12 pt-8 pb-4"> <h3 className="text-4xl md:text-5xl dark:text-[#EEE5E5] text-[#2A2C3F] uppercase text-center px-12 pt-8 pb-4">
{t("home.sections.poweredBy")} {t("home.sections.poweredBy")}
</h3> </h3>
)} )}
<HoverTicker className="xl:flex-1 py-8 sm:py-10 xl:py-4 2xl:py-6"> <div className="relative xl:flex-1 overflow-hidden py-8 sm:py-10 xl:py-4 2xl:py-6">
<div className="flex items-center gap-8 sm:gap-10 md:gap-12 xl:gap-16 2xl:gap-20 px-8 sm:px-10 xl:px-14 2xl:px-20"> <div className="ticker-track flex items-center w-max gap-8 sm:gap-10 md:gap-12 xl:gap-16 2xl:gap-20 px-8 sm:px-10 xl:px-14 2xl:px-20">
{tickerSponsors.map((sponsor, index) => ( {tickerSponsors.map((sponsor, index) => (
<NextLink <NextLink
key={`${sponsor.alt}-${index}`} key={`${sponsor.alt}-${index}`}
href={sponsor.href} href={sponsor.href}
target="_blank" target="_blank"
className="flex items-center justify-center shrink-0" className="flex items-center justify-center shrink-0"
aria-hidden={index >= sponsors.length} aria-hidden={index >= sponsors.length}
tabIndex={index >= sponsors.length ? -1 : undefined} tabIndex={index >= sponsors.length ? -1 : undefined}
> >
<Image <Image
src={sponsor.src} src={sponsor.src}
alt={sponsor.alt} alt={sponsor.alt}
width={sponsor.width} width={sponsor.width}
height={sponsor.height} height={sponsor.height}
className={`object-contain max-h-[80px] max-w-[120px] sm:max-h-[110px] sm:max-w-[150px] md:max-h-[130px] md:max-w-[180px] lg:max-h-[140px] lg:max-w-[200px] xl:max-h-[180px] xl:max-w-[240px] 2xl:max-h-[210px] 2xl:max-w-[280px] ${sponsor.className || ""}`} className={`object-contain max-h-[80px] max-w-[120px] sm:max-h-[110px] sm:max-w-[150px] md:max-h-[130px] md:max-w-[180px] lg:max-h-[140px] lg:max-w-[200px] xl:max-h-[180px] xl:max-w-[240px] 2xl:max-h-[210px] 2xl:max-w-[280px] ${sponsor.className || ""}`}
/> />
</NextLink> </NextLink>
))} ))}
</div> </div>
</HoverTicker>
<style jsx>{`
.ticker-container {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.ticker-container::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.ticker-track {
animation: sponsors-ticker 36s linear infinite;
will-change: transform;
}
.ticker-container:hover .ticker-track {
animation-play-state: paused;
}
@keyframes sponsors-ticker {
from {
transform: translateX(0%);
}
to {
transform: translateX(-25%);
}
}
`}</style>
</div> </div>
<style jsx>{`
.ticker-track {
animation: sponsors-ticker 36s linear infinite;
will-change: transform;
}
@keyframes sponsors-ticker {
from {
transform: translateX(0%);
}
to {
transform: translateX(-25%);
}
}
`}</style>
</div>
); );
} }