lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
109 lines • 5.74 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const framer_motion_1 = require("framer-motion");
const ImageMarquee = ({ items, speed = 50, // speed in pixels per second
direction = "left",
// Default Tailwind width for the card div, now responsive
imageWidth = "w-[240px] sm:w-[300px] md:w-[360px]",
// Default Tailwind height for the card div, now responsive
imageHeight = "h-[160px] sm:h-[200px] md:h-[240px]",
// Default Tailwind horizontal margin for the card div, now responsive
imageMarginX = "mx-1 sm:mx-2", }) => {
const containerRef = (0, react_1.useRef)(null);
const x = (0, react_1.useRef)(0); // This will store the translateX value
const [isHovered, setIsHovered] = react_1.default.useState(false);
const isInView = (0, framer_motion_1.useInView)(containerRef, { margin: "20%" });
// Initialize x.current based on direction for seamless start
(0, react_1.useEffect)(() => {
if (containerRef.current) {
const initialScrollWidth = containerRef.current.scrollWidth;
if (initialScrollWidth > 0) {
const singleSetWidth = initialScrollWidth / 2;
if (direction === "right") {
x.current = -singleSetWidth;
}
else {
x.current = 0;
}
// Apply initial transform immediately
containerRef.current.style.transform = `translateX(${x.current}px)`;
}
}
}, [direction, items]); // Re-run if direction or items change
(0, framer_motion_1.useAnimationFrame)((t, delta) => {
if (!isInView || isHovered)
return;
if (containerRef.current) {
const fullContentWidth = containerRef.current.scrollWidth;
// If fullContentWidth is 0, the content hasn't rendered or has no width yet.
// Exit early to prevent division by zero or incorrect calculations.
if (fullContentWidth === 0)
return;
const singleSetWidth = fullContentWidth / 2;
const moveBy = (speed * delta) / 1000;
if (direction === "left") {
x.current -= moveBy;
// If scrolled past the first set to the left, reset to show start of second set
if (x.current <= -singleSetWidth) {
x.current = 0;
}
}
else {
// direction === "right"
x.current += moveBy;
// If scrolled past the end of the second set to the right (i.e., x.current becomes 0 or positive)
// reset to show the start of the first set again by pulling back.
if (x.current >= 0) {
x.current = -singleSetWidth;
}
}
containerRef.current.style.transform = `translateX(${x.current}px)`;
}
});
const allItems = [...items, ...items]; // Duplicate items for seamless scroll
return ((0, jsx_runtime_1.jsx)("div", { className: "w-full relative", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: (0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: "flex w-max" // w-max ensures the flex container takes the width of all its children
, style: {
willChange: "transform", // Optimize for animation
}, children: allItems.map((item, idx) => ((0, jsx_runtime_1.jsx)("a", { href: item.link, className: `${imageWidth} ${imageHeight} ${imageMarginX} flex-shrink-0
transform hover:scale-125 transition-transform duration-300
border border-white/20 hover:border-primarylw/40 p-2
rounded-xl shadow-lg backdrop-blur-md
bg-gray-200/60 dark:bg-white/5 cursor-pointer block relative z-0 hover:z-50`, children: (0, jsx_runtime_1.jsx)("div", { className: "relative w-full h-full", children: (0, jsx_runtime_1.jsx)("img", { src: item.src, alt: item.alt, className: "absolute inset-0 w-full h-full object-contain rounded-xl shadow-lg bg-black pointer-events-none", draggable: false, loading: "lazy" }) }) }, `${item.id}-${idx}`))) }) }));
};
exports.default = ImageMarquee;
//# sourceMappingURL=image-sliding-marquee.js.map