スクロールで見せる（Scroll Reveal）

'use client';
import { useRef } from 'react';
import { motion } from 'framer-motion';

export default function ScrollDemo() {
  const containerRef = useRef<HTMLDivElement>(null);

  return (
    <div ref={containerRef} style={{ height: '400px', overflowY: 'auto' }}>
      {/* フェードイン */}
      <motion.div
        initial={{ opacity: 0 }}
        whileInView={{ opacity: 1 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
        viewport={{ once: true, amount: 0.3, root: containerRef }}
      >
        フェードイン
      </motion.div>

      {/* スライドイン（下から） */}
      <motion.div
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
        viewport={{ once: true, amount: 0.3, root: containerRef }}
      >
        スライドイン
      </motion.div>

      {/* スケールイン */}
      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        whileInView={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.6, ease: 'easeOut' }}
        viewport={{ once: true, amount: 0.3, root: containerRef }}
      >
        スケールイン
      </motion.div>

      {/* スタガー（複数要素を順番に） */}
      {[0, 1, 2].map((i) => (
        <motion.div
          key={i}
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: i * 0.1 }}
          viewport={{ once: true, root: containerRef }}
        >
          スタガー {i + 1}
        </motion.div>
      ))}
    </div>
  );
}

// scroll イベントで要素の位置を判定してアニメーション
$(window).on('scroll', function () {
  $('.animate-on-scroll').each(function () {
    const elementTop = $(this).offset().top;
    const viewportBottom = $(window).scrollTop() + $(window).height();
    if (elementTop < viewportBottom - 50) {
      $(this).addClass('is-visible');
    }
  });
});

// waypoints プラグインを使った方法
$('.animate-on-scroll').waypoint(function () {
  $(this.element).addClass('is-visible');
}, { offset: '80%' });

// スクロール量に連動して透明度を変える
$(window).on('scroll', function () {
  const scrollTop = $(window).scrollTop();
  const opacity = Math.min(scrollTop / 300, 1);
  $('#hero').css('opacity', 1 - opacity);
});