ככה תבנה אתר
עם AI

/* CSS Background Parallax — simplest method */
.parallax-hero {
  background-image: url('your-image.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}
/* background-attachment: fixed keeps the image
   stationary while content scrolls */

/* JavaScript Multi-Layer Parallax */
window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  document.querySelector('.layer-back').style.transform =
    `translateY(${scrollY * 0.2}px)`;
  document.querySelector('.layer-mid').style.transform =
    `translateY(${scrollY * 0.5}px)`;
  document.querySelector('.layer-front').style.transform =
    `translateY(${scrollY * 0.8}px)`;
});
/* Add class layer-back, layer-mid, layer-front
   to your HTML elements */

/* Horizontal Scroll Parallax */
const section = document.querySelector('.horizontal-section');
const track = document.querySelector('.horizontal-track');
window.addEventListener('scroll', () => {
  const sectionTop = section.offsetTop;
  const scrollProgress = window.scrollY - sectionTop;
  if (scrollProgress >= 0) {
    track.style.transform = `translateX(-${scrollProgress * 0.5}px)`;
  }
});
/* Pin the section with CSS:
.horizontal-section { position: sticky; top: 0;
                      height: 100vh; overflow: hidden; }
.horizontal-track { display: flex; width: 400vw; }
*/

/* Mouse Move Parallax */
document.addEventListener('mousemove', (e) => {
  const centerX = window.innerWidth / 2;
  const centerY = window.innerHeight / 2;
  const moveX = (e.clientX - centerX) / centerX;
  const moveY = (e.clientY - centerY) / centerY;
  document.querySelector('.parallax-layer-1').style.transform =
    `translate(${moveX * 20}px, ${moveY * 20}px)`;
  document.querySelector('.parallax-layer-2').style.transform =
    `translate(${moveX * 40}px, ${moveY * 40}px)`;
  document.querySelector('.parallax-layer-3').style.transform =
    `translate(${moveX * 10}px, ${moveY * 10}px)`;
});

.fade-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* JavaScript to trigger */
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add('visible');
  });
}, { threshold: 0.15 });
document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));

.stagger-container .stagger-item {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-container.visible .stagger-item:nth-child(1) { transition-delay: 0.1s; }
.stagger-container.visible .stagger-item:nth-child(2) { transition-delay: 0.2s; }
.stagger-container.visible .stagger-item:nth-child(3) { transition-delay: 0.3s; }
.stagger-container.visible .stagger-item:nth-child(4) { transition-delay: 0.4s; }
.stagger-container.visible .stagger-item {
  opacity: 1;
  transform: translateY(0);
}

.slide-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-right {
  opacity: 0;
  transform: translateX(80px);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-left.visible, .slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scale-up {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.scale-up.visible {
  opacity: 1;
  transform: scale(1);
}

/* Pro tip: combine with translateY for extra polish */
.scale-up-fancy {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.scale-up-fancy.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.clip-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.clip-reveal.visible { clip-path: inset(0 0% 0 0); }

/* For text reveal with line mask */
.text-reveal-wrapper { overflow: hidden; display: block; }
.text-reveal {
  transform: translateY(110%);
  display: block;
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}
.text-reveal.visible { transform: translateY(0); }

.progress-bar {
  width: 0%;
  height: 6px;
  background: linear-gradient(90deg, #7C3AED, #06B6D4);
  border-radius: 3px;
  transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* In JavaScript, set the width when visible */
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      e.target.style.width = e.target.dataset.width + '%';
      /* Add data-width="85" to your HTML element */
    }
  });
});

document.querySelectorAll('.tilt-card').forEach(card => {
  card.addEventListener('mousemove', (e) => {
    const rect = card.getBoundingClientRect();
    const x = (e.clientX - rect.left - rect.width / 2) / 15;
    const y = (e.clientY - rect.top - rect.height / 2) / 15;
    card.style.transform =
      `perspective(1000px) rotateX(${-y}deg) rotateY(${x}deg) scale(1.03)`;
    card.style.transition = 'transform 0.1s ease';
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform =
      'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
    card.style.transition =
      'transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)';
  });
});

document.querySelectorAll('.magnetic').forEach(btn => {
  btn.addEventListener('mousemove', (e) => {
    const rect = btn.getBoundingClientRect();
    const x = e.clientX - rect.left - rect.width / 2;
    const y = e.clientY - rect.top - rect.height / 2;
    btn.style.transform = `translate(${x * 0.35}px, ${y * 0.35}px)`;
    btn.style.transition = 'transform 0.1s ease';
  });
  btn.addEventListener('mouseleave', () => {
    btn.style.transform = 'translate(0, 0)';
    btn.style.transition =
      'transform 0.6s cubic-bezier(0.23, 1, 0.32, 1)';
  });
});

.image-zoom-container {
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}
.image-zoom-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.image-zoom-container:hover img { transform: scale(1.1); }

/* Add overlay on hover */
.image-zoom-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.image-zoom-container:hover::after { opacity: 1; }

.flip-card { perspective: 1000px; height: 300px; }
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
}
.flip-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #7C3AED, #06B6D4);
}

.liquid-btn {
  position: relative;
  overflow: hidden;
  border: 2px solid #7C3AED;
  color: #7C3AED;
  background: transparent;
  padding: 14px 32px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.4s ease;
}
.liquid-btn::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #7C3AED;
  transition: height 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: -1;
}
.liquid-btn:hover::before { height: 100%; }
.liquid-btn:hover { color: white; }

/* CSS */
.cursor {
  width: 12px; height: 12px;
  background: #7C3AED;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s ease;
}
.cursor-follower {
  width: 40px; height: 40px;
  border: 2px solid #7C3AED;
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transition: all 0.15s ease;
  opacity: 0.6;
}

/* JS */
document.addEventListener('mousemove', (e) => {
  cursor.style.left = e.clientX - 6 + 'px';
  cursor.style.top = e.clientY - 6 + 'px';
  setTimeout(() => {
    follower.style.left = e.clientX - 20 + 'px';
    follower.style.top = e.clientY - 20 + 'px';
  }, 80);
});

.nav-link { position: relative; text-decoration: none; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #7C3AED;
  transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-link:hover::after { width: 100%; }

/* Reverse: erase from left on mouse leave */
.nav-link-reverse::after { left: auto; right: 0; }
.nav-link-reverse:hover::after { width: 100%; left: 0; right: auto; }

function typeWriter(element, texts, speed = 80) {
  let textIndex = 0;
  let charIndex = 0;
  let isDeleting = false;
  function type() {
    const currentText = texts[textIndex];
    if (!isDeleting) {
      element.textContent = currentText.slice(0, charIndex++);
      if (charIndex > currentText.length) {
        isDeleting = true;
        setTimeout(type, 2000);
        return;
      }
    } else {
      element.textContent = currentText.slice(0, charIndex--);
      if (charIndex < 0) {
        isDeleting = false;
        textIndex = (textIndex + 1) % texts.length;
      }
    }
    setTimeout(type, isDeleting ? 40 : speed);
  }
  type();
}

// Usage: cycles through multiple headlines
typeWriter(document.querySelector('h1'), [
  'Build Stunning Websites',
  'With AI Prompts',
  'No Code Required'
]);

.blur-word {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.blur-word.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Split your headline into spans with JS */
function splitWords(element) {
  const words = element.textContent.split(' ');
  element.innerHTML = words.map((w, i) =>
    '' + w + ' '
  ).join('');
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.gradient-text {
  background: linear-gradient(-45deg, #7C3AED, #06B6D4, #10B981, #A78BFA);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 4s ease infinite;
}

function animateCount(el, target, duration = 2000) {
  const start = performance.now();
  function update(time) {
    const elapsed = time - start;
    const progress = Math.min(elapsed / duration, 1);
    const eased = 1 - Math.pow(1 - progress, 3);
    el.textContent = Math.floor(eased * target).toLocaleString();
    if (progress < 1) requestAnimationFrame(update);
  }
  requestAnimationFrame(update);
}

// Trigger on scroll
const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      animateCount(e.target, parseInt(e.target.dataset.count));
      /* Add data-count="10000" to your HTML */
    }
  });
});

function scrambleText(element, finalText, duration = 1000) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  const steps = 20;
  let step = 0;
  const interval = setInterval(() => {
    element.textContent = finalText
      .split('')
      .map((char, i) => {
        if (char === ' ') return ' ';
        if (i < (step / steps) * finalText.length) return char;
        return chars[Math.floor(Math.random() * chars.length)];
      })
      .join('');
    if (++step > steps) {
      element.textContent = finalText;
      clearInterval(interval);
    }
  }, duration / steps);
}

const video = document.querySelector('.scroll-video');
const section = document.querySelector('.video-section');

window.addEventListener('scroll', () => {
  const sectionTop = section.offsetTop;
  const sectionHeight = section.offsetHeight;
  const scrolled = window.scrollY - sectionTop;
  const progress = Math.max(0, Math.min(1, scrolled / sectionHeight));
  if (video.duration) {
    video.currentTime = video.duration * progress;
  }
});

/* HTML: Make the video section tall (300vh)
   so user has room to scroll

  

    
  

*/

.sticky-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}
.sticky-image {
  position: sticky;
  top: 100px;
  height: 500px;
  border-radius: 16px;
  overflow: hidden;
  transition: opacity 0.4s ease;
}
.feature-panel {
  padding: 6rem 0;
  min-height: 100vh;
}

/* JavaScript: Change image based on visible panel */
const panels = document.querySelectorAll('.feature-panel');
const stickyImg = document.querySelector('.sticky-image img');
const panelObserver = new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      stickyImg.src = e.target.dataset.image;
    }
  });
}, { threshold: 0.5 });
panels.forEach(p => panelObserver.observe(p));

.marquee-wrapper {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex;
  animation: marquee 25s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* IMPORTANT: Duplicate your items so the loop is seamless

  [your items] [your items again]

*/

window.addEventListener('scroll', () => {
  document.querySelectorAll('.scale-on-scroll').forEach(img => {
    const rect = img.getBoundingClientRect();
    const viewportCenter = window.innerHeight / 2;
    const elementCenter = rect.top + rect.height / 2;
    const distanceFromCenter = Math.abs(viewportCenter - elementCenter);
    const maxDistance = window.innerHeight / 2;
    const scale = 1.1 - (distanceFromCenter / maxDistance) * 0.3;
    img.style.transform = `scale(${Math.max(0.8, Math.min(1.1, scale))})`;
  });
});
/* Add class scale-on-scroll to your images
   Add transition: transform 0.1s ease in CSS */

.page-transition {
  position: fixed;
  inset: 0;
  background: #7C3AED;
  z-index: 9999;
  transform: scaleX(0);
  transform-origin: left;
}
@keyframes slideIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes slideOut {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* On navigate */
function navigateTo(url) {
  const overlay = document.querySelector('.page-transition');
  overlay.style.animation =
    'slideIn 0.4s cubic-bezier(0.77, 0, 0.175, 1) forwards';
  overlay.style.transformOrigin = 'left';
  setTimeout(() => { window.location.href = url; }, 400);
}

/* On page load */
window.addEventListener('load', () => {
  const overlay = document.querySelector('.page-transition');
  overlay.style.animation =
    'slideOut 0.4s cubic-bezier(0.77, 0, 0.175, 1) forwards';
  overlay.style.transformOrigin = 'right';
});

.loader {
  position: fixed;
  inset: 0;
  background: #0D0D0D;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader.hidden { opacity: 0; visibility: hidden; }
.loader-bar {
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 24px;
}
.loader-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #7C3AED, #06B6D4);
  animation: loadProgress 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes loadProgress {
  from { width: 0%; }
  to { width: 100%; }
}

/* JS */
window.addEventListener('load', () => {
  setTimeout(() => {
    document.querySelector('.loader').classList.add('hidden');
  }, 1800);
});

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.animated-bg {
  background: linear-gradient(-45deg, #7C3AED, #06B6D4, #10B981, #1E1E2E);
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite;
}

<!-- Add to HTML head -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>

<!-- Initialize -->
<script>
VANTA.NET({
  el: "#hero-section",
  mouseControls: true,
  touchControls: true,
  color: 0x7C3AED,
  backgroundColor: 0x0D0D0D,
  points: 12.0,
  maxDistance: 20.0,
  spacing: 18.0
});
</script>
<!-- Other effects: VANTA.WAVES, VANTA.BIRDS,
     VANTA.FOG, VANTA.CELLS -->

/* Add after your gradient background */
.noise-overlay { position: relative; }
.noise-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  border-radius: inherit;
}

.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Dark glass variant */
.glass-card-dark {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

@keyframes morphBlob {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%  { border-radius: 50% 60% 30% 60% / 40% 30% 60% 50%; }
  75%  { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
.morphing-blob {
  width: 400px;
  height: 400px;
  background: linear-gradient(135deg, #7C3AED, #06B6D4);
  animation: morphBlob 8s ease-in-out infinite;
  position: absolute;
  opacity: 0.6;
  filter: blur(40px);
}

<!-- Step 1: Create your 3D scene at spline.design (free) -->
<!-- Step 2: Click Export > Web > Copy embed code -->
<!-- Step 3: Paste this into your HTML -->

<script type="module"
  src="https://unpkg.com/@splinetool/viewer@1.0.0/build/spline-viewer.js"></script>
<spline-viewer
  url="https://prod.spline.design/YOUR-SCENE-ID/scene.splinecode"
  style="width: 100%; height: 600px;"></spline-viewer>

<!-- The scene reacts to mouse movement automatically.
     Perfect for hero sections and product showcases.
     spline.design has free templates: robots, phones,
     abstract 3D shapes -->

html { scroll-behavior: smooth; }
section { scroll-margin-top: 80px; }

h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
p  { font-size: clamp(1rem, 2vw, 1.125rem); }

const toggle = document.querySelector('#dark-toggle');
toggle.addEventListener('click', () => {
  document.body.classList.toggle('dark');
  localStorage.setItem(
    'theme',
    document.body.classList.contains('dark') ? 'dark' : 'light'
  );
});

function copyText(text) {
  navigator.clipboard.writeText(text).then(() => {
    alert('Copied!');
  });
}

function isValidEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}