タイプスクリプトとフレーマーモーションを使用したアニメーションビデオツールチップ

ビデオ ツールチップは、ユーザーがアバターの上にマウスを移動するとアクティブになるアニメーション コンポーネントです。

このコンポーネントは、個人の自己紹介や追加のコンテキストを提供する短いビデオを表示し、個人的でインタラクティブな雰囲気を加えます。

これは、余分なクリックを必要とせずに、チームメンバー、講演者、インフルエンサーに関する迅速な洞察を提供し、思い出に残るユーザーエクスペリエンスを作成するのに特に役立ちます。

デモ

ソースコード

video-tooltip.tsx

import { useState, useCallback, useMemo } from "react";
import { motion, useTransform, AnimatePresence, useMotionValue, useSpring } from "framer-motion";
"@/lib/utils" から { cn } をインポートします。

インターフェース TooltipItem {
  ID: 番号;
  名前: 文字列;
  指定: 文字列;
  画像: 文字列;
  ビデオ: 文字列;
  テキスト: 文字列;
}

インターフェース VideoTooltipProps {
  アイテム: TooltipItem[];
  クラス名?: 文字列;
}

import const VideoTooltip = ({ items, className = "" }: VideoTooltipProps) => {
  const [hoveredIndex, setHoveredIndex] = useState<number null>(null);
  const [showText, setShowText] = useState(false);
  const springConfig = useMemo(
    () => ({
      剛性: 100、
      ダンピング: 5、
    })、
    []
  );

  // モーションの設定
  const x = useMotionValue(0);
  const translationX = useSpring(useTransform(x, [-100, 100], [-50, 50]), springConfig);
  // useCallbackを使用してイベントハンドラーを最適化します
  const handleMouseMove = useCallback(
    (イベント: React.MouseEvent<HTMLElement>) => {
      consthalfWidth =event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX -halfWidth);
    }、
    [×]
  );

  戻る （
    <div className={cn("flex items-center gap-2", className)}>
      {items.map((アイテム) => (
        <div className="-mr-4 相対グループ" key={item.name} onMouseEnter={() => setHoveredIndex(item.id)} onMouseLeave={() => setHoveredIndex(null)}>
          <AnimatePresence モード="popLayout">
            {hoveredIndex === item.id && (
              




          

            
        <script>
  // Detect dark theme
  var iframe = document.getElementById('tweet-1876277735032848773-256');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1876277735032848773&theme=dark"
  }

</script></number>

以上がタイプスクリプトとフレーマーモーションを使用したアニメーションビデオツールチップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。