gsap.registerPlugin(ScrollTrigger);
const items = gsap.utils.toArray(".item");
/* מיקומים התחלתיים */
const positions = [
{ x: -120, y: -180 },
{ x: 100, y: -160 },
{ x: -90, y: 220 },
{ x: 130, y: 140 },
{ x: -140, y: 160 },
{ x: 70, y: 260 },
{ x: -110, y: -120 },
{ x: 90, y: -240 },
{ x: -60, y: 300 },
{ x: 150, y: 80 },
{ x: -130, y: 190 },
{ x: 60, y: -280 },
{ x: -160, y: 60 },
{ x: 120, y: 240 },
{ x: -80, y: -300 },
{ x: 95, y: 170 }
];
items.forEach((item, i) => {
gsap.set(item, positions[i] || { x: 0, y: 0 });
randomMove(item);
});
/* תנועה אקראית אינסופית */
function randomMove(el) {
gsap.to(el, {
x: `+=${gsap.utils.random(-40, 40)}`,
y: `+=${gsap.utils.random(-60, 60)}`,
rotation: `+=${gsap.utils.random(-5, 5)}`,
duration: gsap.utils.random(1.5, 3),
ease: "sine.inOut",
onComplete: () => randomMove(el)
});
}
/* התכנסות בגלילה */
ScrollTrigger.create({
trigger: document.body,
start: "top top",
once: true,
onEnter: () => {
// עוצר כל אנימציה פעילה על האייטמים
gsap.killTweensOf(items);
// ואז מחזיר למיקום הטבעי
gsap.to(items, {
x: 0,
y: 0,
rotation: 0,
duration: 0.5,
stagger: 0.01,
ease: "power3.out"
});
}
});
NetConnect
אינטרנט ורשתות בלי תקלות
הקמה וניהול של תשתיות אינטרנט
ותקשורת יציבות עם שירותי
תפעולי מלא
ProConnect
מרכזיות חכמות שתמיד עובדות
מרכזיות טלפוניות חכמות לעסקים
ומוסדות עם פקדי שליטה
חדשניים ומתקדמים
SafeConnect
מערכות אינטרקום ומצלמות פעילות
תכנון והתקנת מצלמות, בקרות
כניסה, דלתות חכמות, מערכות
כריזה ועוד
document.addEventListener("DOMContentLoaded", function () {
gsap.registerPlugin(ScrollTrigger);
const stack = document.querySelector(".itemStack");
if (!stack) return;
const cards = gsap.utils.toArray(".itemStack .itemCard");
if (!cards.length) return;
function animateCardsToCenter() {
const stackRect = stack.getBoundingClientRect();
const stackCenterX = stackRect.left + stackRect.width / 2;
const stackCenterY = stackRect.top + stackRect.height / 2;
const tl = gsap.timeline({
scrollTrigger: {
trigger: stack,
start: "top 70%",
end: "bottom center",
scrub: 1
}
});
cards.forEach((card, index) => {
const cardRect = card.getBoundingClientRect();
const cardCenterX = cardRect.left + cardRect.width / 2;
const cardCenterY = cardRect.top + cardRect.height / 2;
const moveX = stackCenterX - cardCenterX;
const moveY = stackCenterY - cardCenterY;
tl.to(card, {
x: moveX,
y: moveY,
scale: 0.9,
rotation: 0,
duration: 1,
ease: "none"
}, 0);
});
}
animateCardsToCenter();
// רענון אם אלמנטור/טעינה מאוחרת משנים מידות
window.addEventListener("load", () => {
ScrollTrigger.getAll().forEach(st => st.kill());
gsap.set(cards, { clearProps: "transform" });
animateCardsToCenter();
ScrollTrigger.refresh();
});
window.addEventListener("resize", () => {
ScrollTrigger.getAll().forEach(st => st.kill());
gsap.set(cards, { clearProps: "transform" });
animateCardsToCenter();
ScrollTrigger.refresh();
});
});
