92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
// MovingLogos.js
|
|
"use client";
|
|
import React, { useEffect } from "react";
|
|
|
|
import logobrand5 from "../../public/images/logobrand/5.png";
|
|
import logobrand4 from "../../public/images/logobrand/4.png";
|
|
import logobrand3 from "../../public/images/logobrand/3.png";
|
|
import logobrand2 from "../../public/images/logobrand/2.png";
|
|
import logobrand6 from "../../public/images/logobrand/6.png";
|
|
import Image from "next/image";
|
|
|
|
// import styles from "./MovingLogos.module.css";
|
|
|
|
const MovingLogos = () => {
|
|
const logos = [
|
|
{ id: 1, logo: logobrand5 },
|
|
{ id: 2, logo: logobrand4 },
|
|
{ id: 3, logo: logobrand3 },
|
|
{ id: 4, logo: logobrand6 },
|
|
{ id: 1, logo: logobrand5 },
|
|
{ id: 2, logo: logobrand4 },
|
|
{ id: 3, logo: logobrand3 },
|
|
{ id: 4, logo: logobrand2 },
|
|
{ id: 1, logo: logobrand5 },
|
|
{ id: 2, logo: logobrand4 },
|
|
{ id: 3, logo: logobrand3 },
|
|
{ id: 4, logo: logobrand6 },
|
|
{ id: 1, logo: logobrand5 },
|
|
{ id: 2, logo: logobrand4 },
|
|
{ id: 3, logo: logobrand6 },
|
|
{ id: 4, logo: logobrand2 },
|
|
{ id: 1, logo: logobrand5 },
|
|
{ id: 2, logo: logobrand4 },
|
|
{ id: 3, logo: logobrand3 },
|
|
{ id: 4, logo: logobrand2 },
|
|
];
|
|
|
|
useEffect(() => {
|
|
const moveLogos = () => {
|
|
logos.forEach((logo) => {
|
|
const logoElement = document.getElementById(`logo-${logo.id}`);
|
|
if (logoElement) {
|
|
logoElement.style.transform = "translateX(-10px)"; // Adjust the value based on your preference
|
|
}
|
|
});
|
|
};
|
|
|
|
const intervalId = setInterval(moveLogos, 100); // Adjust the interval duration based on your preference
|
|
|
|
return () => clearInterval(intervalId);
|
|
}, [logos]);
|
|
|
|
return (
|
|
<div className="">
|
|
{/* {logos.map((e) => (
|
|
<div className="w-[100px]">
|
|
<Image
|
|
key={e.id}
|
|
id={`logo-${e.id}`}
|
|
src={e.logo}
|
|
alt={`Logo ${e.id}`}
|
|
// className={styles.logo}
|
|
/>
|
|
</div>
|
|
))} */}
|
|
|
|
<div className="xs:w-4/5 lg:w-3/5 mx-auto">
|
|
<div className="w-full inline-flex flex-nowrap overflow-hidden [mask-image:_linear-gradient(to_right,transparent_0,_black_100px,_black_calc(100%-100px),transparent_100%)]">
|
|
<ul
|
|
x-ref="logos"
|
|
className="flex items-center justify-center md:justify-start [&_li]:mx-5 [&_img]:max-w-none animate-infinite-scroll hover:animate-infinite-scroll2"
|
|
>
|
|
{logos.map((e) => (
|
|
<li className="w-[]">
|
|
<Image
|
|
key={e.id}
|
|
id={`logo-${e.id}`}
|
|
src={e.logo}
|
|
alt={`Logo ${e.id}`}
|
|
className="xs:w-[60px] lg:w-[100px]"
|
|
/>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MovingLogos;
|