title: 多源設計H5生成器 description: 參考頁面佈局截圖、文案文件（PPT/txt/doc/pdf）、標註文案圖片素材，生成帶動畫的響應式H5網頁。支援PC端UI介面、移動端頁面、圖片淡入淡出、文字呼吸效果。觸發詞：設計轉H5、截圖轉網頁、文件生成H5、圖片標註轉H5、參考圖生成網頁、多源素材H5、設計稿還原、平面設計H5 summary: 支援多種輸入源（截圖、文案文件、圖片素材）生成帶動畫效果的響應式H5網頁，自動實現移動端+PC端自適應，支援淡入淡出、文字呼吸等動效。 author: WorkBuddy version: 1.0.0 tags: [H5, 響應式, 多源輸入, 截圖識別, 文件解析, 圖片素材, 動效, PC端, 移動端, 淡入淡出, 呼吸效果, 設計還原] trigger_priority: 100 allowed-file-types: [.png, .jpg, .jpeg, .ppt, .pptx, .txt, .doc, .docx, .pdf] output-format: [html, css, js]

多源設計H5生成器 Skill v1.0

版本更新

• v1.0: 首發版本，支援多源輸入、響應式佈局、動畫效果

功能概述

本Skill支援多種輸入源生成帶動畫效果的響應式H5網頁：

使用方法

基本語法

@skill://design-to-h5 @[截圖路徑] @[文案文件路徑] @[標註圖片路徑] [動效選項]

示例

輸入源處理

1. 截圖/設計稿處理

對於頁面佈局截圖，系統會進行以下處理：

┌─────────────────────────────────────────────────────────────┐
│                    截圖解析流程                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐    ┌────────┐ │
│  │ 1.截圖   │───▶│ 2.佈局   │───▶│ 3.元素   │───▶│ 4.位置 │ │
│  │ 上傳    │    │ 識別    │    │ 提取    │    │ 對映   │ │
│  └──────────┘    └──────────┘    └──────────┘    └────────┘ │
│                                                             │
│  識別內容：背景色、文本區域、圖片位置、按鈕、圖示、層級結構  │
│                                                             │
└─────────────────────────────────────────────────────────────┘

佈局識別策略：

• 背景色提取：分析截圖主色調作為頁面背景
• 內容區域檢測：識別主體內容邊界和留白區域
• 元素分類：區分背景圖、裝飾圖、文字區塊、按鈕等
• 網格系統：建立響應式網格輔助定位

2. 文案文件解析

支援的文件格式及解析方式：

文件內容對映規則：

// 文案對映配置
const copyMapping = {
    mainTitle: ['h1', '標題', '主標題', '#'],
    subTitle: ['h2', '副標題', 'subtitle'],
    bodyText: ['p', '正文', '段落', 'content'],
    button: ['按鈕', 'button', 'cta'],
    caption: ['caption', '註釋', '說明']
};

// 典型文案結構
const documentStructure = {
    hero: {           // 首屏大圖區域
        title: '主標題文案',
        subtitle: '副標題文案',
        description: '描述文字'
    },
    features: [      // 特色/功能區塊
        { title: '標題1', desc: '描述1' },
        { title: '標題2', desc: '描述2' }
    ],
    cta: {            // 行動號召
        text: '按鈕文字',
        link: '#contact'
    },
    footer: {         // 頁尾
        copyright: '版權資訊'
    }
};

3. 標註圖片素材處理

對於標註有文案資訊的圖片素材：

識別規則：
1. 圖片檔名 → 區域標識（如 banner.jpg、feature-1.png）
2. 標註層級 → 內容優先順序
3. 組合素材 → 多圖輪播/畫廊

核心演算法

1. 佈局網格系統

// 響應式網格配置
const gridConfig = {
    mobile: {
        columns: 4,
        gutter: 16,      // px
        margin: 16,
        maxWidth: 375    // 移動端基準寬度
    },
    tablet: {
        columns: 8,
        gutter: 24,
        margin: 24,
        maxWidth: 768
    },
    desktop: {
        columns: 12,
        gutter: 24,
        margin: 32,
        maxWidth: 1440
    }
};

// 容器寬度斷點
const breakpoints = {
    sm: '576px',    // 大手機
    md: '768px',    // 平板
    lg: '1024px',   // 小桌面
    xl: '1280px',   // 大桌面
    xxl: '1536px'   // 超大屏
};

2. 響應式佈局演算法

// 佈局型別識別
const layoutTypes = {
    SINGLE_COLUMN: '單列布局',      // 移動端優先
    TWO_COLUMN: '雙列布局',         // 左右分欄
    GRID: '網格佈局',               // 多專案排列
    HERO: 'Hero大圖佈局',           // 首屏突出
    CARDS: '卡片佈局'               // 均等卡片
};

// 元素響應式策略
function getResponsiveStrategy(element) {
    // 優先順序：移動端優先
    const mobile = element.mobile || element;
    const tablet = element.tablet || element;
    const desktop = element.desktop || element;

    return {
        width: {
            mobile: mobile.width || '100%',
            tablet: tablet.width || 'calc(50% - 12px)',
            desktop: desktop.width || element.width || 'auto'
        },
        flexGrow: mobile.flex || 0,
        flexShrink: mobile.shrink || 1
    };
}

3. 動畫效果配置

// ==================== 淡入淡出效果配置 ====================
const fadeConfig = {
    duration: 600,                    // 動畫時長(ms)
    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
    staggerDelay: 150,               // 交錯延遲(ms)
    threshold: 0.1,                   // 觸發閾值（進入可視區域）
    once: true                        // 是否只觸發一次
};

// 淡入動畫關鍵幀
const fadeKeyframes = {
    opacity: [0, 1],
    transform: ['translateY(20px)', 'translateY(0)']
};

// 觸發時機
const triggerEvents = ['scroll', 'touchmove', 'resize'];

// ==================== 呼吸效果配置 ====================
const breathConfig = {
    duration: 2500,                   // 單次呼吸週期(ms)
    scaleRange: [1, 1.03],            // 縮放範圍
    filterRange: ['brightness(1)', 'brightness(1.1)'],
    easing: 'ease-in-out',
    hoverOnly: true                   // 僅懸停觸發
};

// 呼吸動畫關鍵幀
const breathKeyframes = {
    '0%, 100%': {
        transform: 'scale(1)',
        filter: 'brightness(1)',
        textShadow: 'none'
    },
    '50%': {
        transform: 'scale(1.03)',
        filter: 'brightness(1.1)',
        textShadow: '0 0 20px rgba(255,255,255,0.3)'
    }
};

動畫效果模板

1. 圖片淡入淡出 (FadeIn)

/* ==================== 淡入淡出動畫 ==================== */

/* 入場淡入淡出 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 交錯入場動畫類 */
.animate-fade-in {
    opacity: 0;
    animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 交錯延遲 */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

/* 滾動觸發的淡入 */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 移動端觸控觸發 */
@media (hover: none) {
    .fade-in-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
    }
}

2. 文字呼吸效果 (Breath on Hover)

/* ==================== 文字呼吸動效 ==================== */

/* 基礎呼吸效果 */
@keyframes textBreath {
    0%, 100% {
        transform: scale(1);
        text-shadow: none;
    }
    50% {
        transform: scale(1.02);
        text-shadow: 0 0 10px currentColor;
    }
}

/* 懸停呼吸類 */
.text-breath:hover {
    animation: textBreath 2.5s ease-in-out infinite;
}

/* 呼吸+發光效果 */
@keyframes textGlow {
    0%, 100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.6),
                     0 0 30px rgba(255, 255, 255, 0.4);
        transform: scale(1.03);
    }
}

.text-glow:hover {
    animation: textGlow 2s ease-in-out infinite;
}

/* 標題專用呼吸 */
.title-breath:hover {
    animation: textBreath 2.5s ease-in-out infinite;
    color: #3B82F6;
    transition: color 0.3s ease;
}

/* 按鈕文字呼吸 */
.btn-text-breath:hover {
    animation: textBreath 2s ease-in-out infinite;
    letter-spacing: 0.05em;
}

3. 圖片懸停效果

/* ==================== 圖片懸停效果 ==================== */

/* 圖片淡入淡出+縮放 */
.image-hover-fade {
    position: relative;
    overflow: hidden;
}

.image-hover-fade::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-hover-fade:hover::after {
    opacity: 1;
}

.image-hover-fade img {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.image-hover-fade:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

/* 圖片切換淡入淡出 */
.image-switch {
    position: relative;
}

.image-switch img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.image-switch img:first-child {
    opacity: 1;
}

.image-switch:hover img:first-child {
    opacity: 0;
}

.image-switch:hover img:last-child {
    opacity: 1;
}

4. 綜合動效組合

/* ==================== 綜合動效 ==================== */

/* 卡片懸停綜合效果 */
.card-hover {
    transition: transform 0.3s ease, 
                box-shadow 0.3s ease,
                opacity 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.card-hover:hover .card-image {
    animation: fadeInScale 0.5s ease forwards;
}

.card-hover:hover .card-title {
    animation: textBreath 2s ease-in-out infinite;
}

/* 按鈕綜合效果 */
.btn-hover {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.btn-hover:hover::before {
    transform: translateX(100%);
}

.btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
}

.btn-hover:hover .btn-text {
    animation: textBreath 2s ease-in-out infinite;
}

響應式模板

1. 移動端優先斷點系統

/* ==================== 響應式斷點 ==================== */

/* 基礎（移動端） */
.container {
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
}

/* 平板 (≥768px) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        padding: 0 24px;
    }
}

/* 桌面 (≥1024px) */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
        padding: 0 32px;
    }
}

/* 大桌面 (≥1280px) */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
}

2. 移動端佈局

/* ==================== 移動端佈局 ==================== */

.h5-mobile-layout {
    /* 單列流式佈局 */
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 全寬圖片 */
.mobile-full-image {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

/* 全寬區塊 */
.mobile-full-section {
    width: 100%;
    padding: 24px 16px;
    margin: 0;
}

/* 移動端間距 */
.mobile-spacing {
    padding: 20px 16px;
    gap: 12px;
}

/* 移動端字號 */
.mobile-text {
    font-size: 14px;
    line-height: 1.6;
}

.mobile-title {
    font-size: 20px;
    font-weight: 600;
}

3. PC端佈局

/* ==================== PC端佈局 ==================== */

.h5-desktop-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
}

/* 常見佈局 */
.desktop-hero {
    grid-column: 1 / -1;  /* 全寬 */
}

.desktop-sidebar {
    grid-column: 1 / 4;    /* 左側邊欄 */
}

.desktop-content {
    grid-column: 4 / 13;   /* 主內容區 */
}

/* 雙列布局 */
.desktop-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

/* 三列布局 */
.desktop-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

/* PC端間距 */
.desktop-spacing {
    padding: 48px 32px;
    gap: 24px;
}

/* PC端字號 */
.desktop-text {
    font-size: 16px;
    line-height: 1.8;
}

.desktop-title {
    font-size: 32px;
    font-weight: 700;
}

4. 響應式隱藏/顯示

/* ==================== 響應式顯示控制 ==================== */

/* 預設隱藏移動端內容 */
.hide-mobile { display: none; }

/* 移動端隱藏 */
@media (max-width: 767px) {
    .hide-mobile { display: block; }
    .show-mobile-only { display: none; }
}

/* 桌面隱藏 */
@media (min-width: 768px) {
    .show-mobile-only { display: block; }
    .hide-desktop { display: none; }
}

完整HTML模板

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>多源設計H5 - 響應式動效頁面</title>
    <style>
        /* ==================== CSS變數定義 ==================== */
        :root {
            /* 顏色系統 */
            --color-primary: #3B82F6;
            --color-secondary: #1E293B;
            --color-text: #333333;
            --color-text-light: #666666;
            --color-bg: #ffffff;
            --color-bg-alt: #f8fafc;

            /* 間距系統 */
            --spacing-xs: 8px;
            --spacing-sm: 12px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
            --spacing-xl: 32px;
            --spacing-2xl: 48px;

            /* 動畫配置 */
            --transition-fast: 0.2s ease;
            --transition-normal: 0.3s ease;
            --transition-slow: 0.5s ease;
            --breath-duration: 2.5s;
            --fade-duration: 0.6s;
        }

        /* ==================== 基礎重置 ==================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            color: var(--color-text);
            line-height: 1.6;
            background: var(--color-bg);
            -webkit-font-smoothing: antialiased;
        }

        /* ==================== 容器系統 ==================== */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
        }

        @media (min-width: 768px) {
            .container {
                padding: 0 var(--spacing-lg);
            }
        }

        /* ==================== 動畫基礎類 ==================== */
        /* 淡入淡出動畫 */
        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity var(--fade-duration) ease,
                        transform var(--fade-duration) ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* 交錯延遲 */
        .delay-1 { transition-delay: 0.1s; }
        .delay-2 { transition-delay: 0.2s; }
        .delay-3 { transition-delay: 0.3s; }
        .delay-4 { transition-delay: 0.4s; }
        .delay-5 { transition-delay: 0.5s; }

        /* ==================== 文字呼吸效果 ==================== */
        .text-breath {
            display: inline-block;
            transition: color var(--transition-fast);
        }

        .text-breath:hover {
            animation: breath var(--breath-duration) ease-in-out infinite;
            color: var(--color-primary);
        }

        @keyframes breath {
            0%, 100% {
                transform: scale(1);
                text-shadow: none;
            }
            50% {
                transform: scale(1.03);
                text-shadow: 0 0 15px currentColor;
            }
        }

        /* 標題呼吸 */
        .title-breath {
            transition: color var(--transition-normal);
        }

        .title-breath:hover {
            animation: breath var(--breath-duration) ease-in-out infinite;
        }

        /* ==================== 圖片效果 ==================== */
        .img-fade {
            transition: opacity var(--transition-normal),
                        transform var(--transition-slow);
        }

        .img-fade:hover {
            opacity: 0.9;
            transform: scale(1.02);
        }

        .img-hover-zoom {
            overflow: hidden;
        }

        .img-hover-zoom img {
            transition: transform var(--transition-slow);
        }

        .img-hover-zoom:hover img {
            transform: scale(1.08);
        }

        /* ==================== Hero區域 ==================== */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--color-secondary) 0%, #334155 100%);
            overflow: hidden;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            padding: var(--spacing-lg);
            max-width: 800px;
        }

        .hero-title {
            font-size: clamp(32px, 8vw, 64px);
            font-weight: 700;
            color: white;
            margin-bottom: var(--spacing-md);
            animation: fadeInUp 0.8s ease forwards;
        }

        .hero-title:hover {
            animation: breath 2.5s ease-in-out infinite;
        }

        .hero-subtitle {
            font-size: clamp(16px, 3vw, 20px);
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: var(--spacing-xl);
            animation: fadeInUp 0.8s ease 0.2s forwards;
            opacity: 0;
        }

        .hero-cta {
            animation: fadeInUp 0.8s ease 0.4s forwards;
            opacity: 0;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* ==================== 按鈕樣式 ==================== */
        .btn {
            display: inline-block;
            padding: var(--spacing-sm) var(--spacing-lg);
            font-size: 16px;
            font-weight: 600;
            text-align: center;
            text-decoration: none;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            transition: all var(--transition-normal);
        }

        .btn-primary {
            background: var(--color-primary);
            color: white;
        }

        .btn-primary:hover {
            background: #2563eb;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
        }

        .btn-primary:hover .btn-text {
            animation: breath 2s ease-in-out infinite;
        }

        /* ==================== 特色區塊 ==================== */
        .features {
            padding: var(--spacing-2xl) 0;
            background: var(--color-bg-alt);
        }

        .section-title {
            text-align: center;
            font-size: clamp(28px, 5vw, 40px);
            font-weight: 700;
            color: var(--color-secondary);
            margin-bottom: var(--spacing-2xl);
        }

        .section-title:hover {
            animation: breath 2.5s ease-in-out infinite;
            color: var(--color-primary);
        }

        .features-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: var(--spacing-lg);
        }

        @media (min-width: 768px) {
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1024px) {
            .features-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .feature-card {
            background: white;
            border-radius: 16px;
            padding: var(--spacing-lg);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: transform var(--transition-normal),
                        box-shadow var(--transition-normal);
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        }

        .feature-card:hover .feature-title {
            animation: breath 2s ease-in-out infinite;
        }

        .feature-card:hover .feature-img img {
            animation: fadeInScale 0.5s ease forwards;
        }

        @keyframes fadeInScale {
            from {
                opacity: 0.8;
                transform: scale(1);
            }
            to {
                opacity: 1;
                transform: scale(1.05);
            }
        }

        .feature-img {
            width: 100%;
            height: 200px;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: var(--spacing-md);
        }

        .feature-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform var(--transition-slow);
        }

        .feature-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--color-secondary);
            margin-bottom: var(--spacing-sm);
            transition: color var(--transition-fast);
        }

        .feature-desc {
            font-size: 14px;
            color: var(--color-text-light);
            line-height: 1.7;
        }

        /* ==================== 響應式隱藏/顯示 ==================== */
        .mobile-only {
            display: block;
        }

        .desktop-only {
            display: none;
        }

        @media (min-width: 768px) {
            .mobile-only {
                display: none;
            }
            .desktop-only {
                display: block;
            }
        }

        /* ==================== 頁尾 ==================== */
        .footer {
            background: var(--color-secondary);
            color: rgba(255, 255, 255, 0.7);
            text-align: center;
            padding: var(--spacing-xl) var(--spacing-md);
        }

        .footer-link {
            color: white;
            text-decoration: none;
            transition: color var(--transition-fast);
        }

        .footer-link:hover {
            animation: breath 2s ease-in-out infinite;
        }
    </style>
</head>
<body>
    <!-- Hero區域 -->
    <section class="hero">
        <div class="hero-content">
            <h1 class="hero-title title-breath">多源設計H5生成器</h1>
            <p class="hero-subtitle">支援截圖、文件、圖片素材，一鍵生成響應式動效頁面</p>
            <div class="hero-cta">
                <a href="#features" class="btn btn-primary">
                    <span class="btn-text text-breath">開始使用</span>
                </a>
            </div>
        </div>
    </section>

    <!-- 特色區塊 -->
    <section class="features" id="features">
        <div class="container">
            <h2 class="section-title">核心功能</h2>
            <div class="features-grid">
                <div class="feature-card fade-in">
                    <div class="feature-img img-hover-zoom">
                        <img src="assets/feature-1.jpg" alt="多源輸入" loading="lazy">
                    </div>
                    <h3 class="feature-title">多源輸入</h3>
                    <p class="feature-desc">支援截圖、PPT、文件、圖片等多種素材格式</p>
                </div>
                <div class="feature-card fade-in delay-1">
                    <div class="feature-img img-hover-zoom">
                        <img src="assets/feature-2.jpg" alt="響應式設計" loading="lazy">
                    </div>
                    <h3 class="feature-title">響應式設計</h3>
                    <p class="feature-desc">自動適配移動端和PC端，提供最佳瀏覽體驗</p>
                </div>
                <div class="feature-card fade-in delay-2">
                    <div class="feature-img img-hover-zoom">
                        <img src="assets/feature-3.jpg" alt="動效豐富" loading="lazy">
                    </div>
                    <h3 class="feature-title">動效豐富</h3>
                    <p class="feature-desc">淡入淡出、呼吸效果、懸停互動應有盡有</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 頁尾 -->
    <footer class="footer">
        <p>&copy; 2026 <a href="#" class="footer-link">多源設計H5</a>. All rights reserved.</p>
    </footer>

    <script>
        // ==================== 滾動動畫觸發 ====================
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const fadeInObserver = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        }, observerOptions);

        // 觀察所有需要淡入的元素
        document.querySelectorAll('.fade-in').forEach(el => {
            fadeInObserver.observe(el);
        });

        // ==================== 移動端觸控效果 ====================
        // 在移動端使用 touchstart 模擬 hover
        if ('ontouchstart' in window) {
            document.querySelectorAll('.img-fade, .img-hover-zoom').forEach(el => {
                el.addEventListener('touchstart', function() {
                    this.classList.add('touch-active');
                });
                el.addEventListener('touchend', function() {
                    this.classList.remove('touch-active');
                });
            });
        }

        // ==================== 平滑滾動 ====================
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // ==================== 圖片懶載入 ====================
        const lazyImages = document.querySelectorAll('img[loading="lazy"]');
        if ('IntersectionObserver' in window) {
            const imageObserver = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.style.opacity = '0';
                        img.style.transition = 'opacity 0.5s ease';
                        img.onload = () => {
                            img.style.opacity = '1';
                        };
                        imageObserver.unobserve(img);
                    }
                });
            });

            lazyImages.forEach(img => imageObserver.observe(img));
        }
    </script>
</body>
</html>

工作流程

┌────────────────────────────────────────────────────────────────┐
│                    多源設計H5生成流程                           │
├────────────────────────────────────────────────────────────────┤
│                                                                │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐    ┌──────────┐ │
│  │ 1.素材   │───▶│ 2.佈局   │───▶│ 3.內容   │───▶│ 4.動效   │ │
│  │ 收集    │    │ 分析    │    │ 提取    │    │ 設計    │ │
│  └──────────┘    └──────────┘    └──────────┘    └──────────┘ │
│       │               │               │               │        │
│       ▼               ▼               ▼               ▼        │
│  截圖/文件/圖片   區域劃分      文案/圖片/樣式    淡入/呼吸      │
│                                                                │
│  ┌──────────┐    ┌──────────┐    ┌──────────┐                 │
│  │ 5.響應式 │───▶│ 6.生成   │───▶│ 7.預覽   │                 │
│  │ 設計    │    │ 程式碼    │    │ 測試    │                 │
│  └──────────┘    └──────────┘    └──────────┘                 │
│       │               │               │                        │
│       ▼               ▼               ▼                        │
│  移動端/PC端     HTML/CSS/JS    瀏覽器驗證                      │
│                                                                │
└────────────────────────────────────────────────────────────────┘

常見問題

擴充套件功能

1. 分享功能（可選）

// 分享元件配置
const shareConfig = {
    title: '多源設計H5',
    desc: '使用多源設計H5生成器建立的精美頁面',
    imgUrl: 'assets/share.jpg',
    platforms: ['weixin', 'weibo', 'qq', 'copy']
};

2. 統計埋點（可選）

// 頁面統計配置
const analyticsConfig = {
    pageView: true,           // 頁面瀏覽
    clickHeatmap: true,        // 點選熱力圖
    scrollDepth: true,         // 滾動深度
    animationTrigger: true     // 動畫觸發統計
};

依賴環境

Python環境（用於文件解析）

pip install python-pptx python-docx PyPDF2 Pillow

Node.js（可選，用於本地預覽）

npx serve .

示例輸出

基於截圖+文案生成的H5頁面包含：

• 響應式佈局（移動端+PC端自適應）

  7w4.net提供免費和付費技能下載。

• 圖片淡入淡出效果
• 文字滑鼠滑過呼吸感
• 懸停互動動畫
• 平滑滾動過渡
• 懶載入最佳化

這個H5生成器功能概念完整，提供了動畫效果和響應式設計的模板，但實際使用時可能無法完全實現"一鍵生成"的效果——文件解析和截圖識別缺少具體的實現程式碼，生成效果可能需要較多人工調整。適合有一定前端基礎的使用者參考模板進行二次開發。