ACGN

ACGN Creative Paradise 🎮📚🎬🎨

A comprehensive ACGN (Animation, Comic, Game, Novel) culture-themed web project that combines display, interaction, and experience.

✨ Project Features

• Immersive Visual Experience: Utilizes parallax scrolling, dynamic text, card flipping effects, and more to create a dreamy ACGN atmosphere.
• Comprehensive Content Coverage: In-depth introduction to 8 classic works spanning animation, comics, games, and novels.
• Rich Interactive Features: Includes drawing board, BGM playback, character card flipping, and work collection navigation.
• Responsive Design: Adapts to different device screens for optimal browsing experience.

🗺️ Website Structure

Main Pages

| Page Name | File Path | Description | | :— | :— | :— | | Culture Homepage | FirstPage.html | ACGN letter parallax effects, cultural origins introduction, exploration guidance | | Main Gallery | index.html | Accordion-style work navigation, eight section entries | | Character Pages | xxx.html (e.g., spiritedaway.html) | Character card flip effects with role introductions | | Story Introduction | xxxStory.html | Text slide-in animations, work story summaries | | Author Introduction | xxxAuthor.html | Author positioning animations, achievements and work collections | | Review Pages | xxxComment.html | Dynamic review displays, BGM background music playback | | Classic Lines | xxxLines.html | Dynamic line arrangement and carousel card displays | | Culture Home | HomePage.html | Parallax scrolling effects, ACGN history and development | | Work Gallery | ACGN主要代表作品.html | Card-style work display with scroll effects | | Creative Drawing Board | 画板.html | Online drawing tool with outline selection and save functionality |

Featured Works

1. Animation: 《Spirited Away》, 《Your Name》
2. Comics: 《罗小黑战记》(Luo Xiao Hei), 《刺客伍六七》(Assassin Seven)
3. Games: 《Ace Attorney》, 《Danganronpa》
4. Novels: 《The Melancholy of Haruhi Suzumiya》, 《Ryuuou no Oshigoto!》

🚀 Quick Start

Online Access

Automatically deployed via GitHub Pages: 👉 https://yankeesean.github.io/ACGN/ACGN/index.html

Local Development

1. Clone the project

    git clone https://github.com/YANKEESEAN/ACGN.git
    cd ACGN/ACGN  # Navigate to the ACGN folder
   

2. Start local server (Recommended: Live Server)
   • Install Live Server extension in VS Code
   • Right-click on FirstPage.html or index.html
   • Select “Open with Live Server”
3. Direct browser access
   • Double-click any HTML file to open in your browser

🛠️ Technology Stack

• Frontend Foundation: HTML5, CSS3, JavaScript (ES6+)
• Layout Techniques: Flexbox, Grid, Responsive Design
• Animation Effects: CSS Animation, CSS Transition, JavaScript Animations
• Interactive Features: Native JavaScript DOM manipulation, Event handling
• Audio Processing: HTML5 Audio API

📁 Project Structure

ACGN/
├── ACGN/                    # Main website content (GitHub Pages source)
│   ├── FirstPage.html       # Culture homepage - entry point
│   ├── index.html          # Main gallery - work navigation center
│   ├── HomePage.html       # Culture home - ACGN development history
│   ├── 画板.html           # Creative drawing board
│   ├── spiritedaway/       # Spirited Away series pages
│   ├── yourname/           # Your Name series pages
│   └── ...other work directories
├── .gitattributes          # Git LFS configuration
├── README.md              # Project documentation (English)
├── README                 # Documentation (Chinese)
├── 网页简介.docx           # Project introduction (Chinese)
├── 网页详细介绍.docx        # Detailed documentation (Chinese)
└── ACGN创想乐园.pdf        # Presentation slides

🎨 Core Features

Visual Effects

• ✅ Parallax scrolling effects
• ✅ Card flip animations
• ✅ Text slide-in特效
• ✅ Image positioning animations
• ✅ Accordion-style navigation

Interactive Features

• ✅ Mouse hover effects
• ✅ Click navigation
• ✅ Drawing board tool
• ✅ BGM music playback
• ✅ Work outline selection

Content Display

• ✅ Multi-work categorization
• ✅ Character introductions
• ✅ Story summaries
• ✅ Author achievements
• ✅ User review carousels
• ✅ Classic line displays

📝 Documentation

For detailed design specifications, implementation principles, and effect demonstrations:

• 网页详细介绍.docx - Complete design documentation (Chinese)
• 网页简介.docx - Project introduction (Chinese)

🤝 Contributing

Welcome to submit Issues and Pull Requests to improve this project!

1. Fork the project
2. Create feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add some AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open Pull Request

📄 License

This project is for learning and communication purposes only. All ACGN works involved are copyright of their original authors and related companies.

• Project code: MIT License
• Resource files (images, audio, etc.): Educational use only

👥 Author

YANKEESEAN

• GitHub: @YANKEESEAN
• Project Link: https://github.com/YANKEESEAN/ACGN

---

Explore the infinite possibilities of ACGN and start your journey into the 2D world! 🚀

🌐 Access Notes

• Main Entry Point: https://yankeesean.github.io/ACGN/
• Direct Page Access: Append specific HTML filename to the URL
• Best Experience: Use modern browsers with JavaScript enabled

---

How to Use This README:

1. Create a new file named README.md in your project root directory
2. Copy and paste all content above
3. Save the file and add to repository:

   git add README.md
   git commit -m "Add English documentation"
   git push origin main
   

This will provide international visitors with a comprehensive understanding of your ACGN project! 🌍

ACGN 创想乐园 🎮📚🎬🎨

一个集展示、互动与体验于一体的综合性 ACGN（动画、漫画、游戏、小说）文化主题网页项目。

✨ 项目特色

• 沉浸式视觉体验：运用视差滚动、动态文字、卡片翻转等效果，营造梦幻的 ACGN 氛围。
• 全方位内容覆盖：深入介绍 8 部经典作品，涵盖动画、漫画、游戏、小说四大领域。
• 丰富的交互功能：包含画板创作、BGM 播放、人物卡片翻转、作品集跳转等互动元素。
• 响应式设计：适配不同设备屏幕，提供良好的浏览体验。

🗺️ 网站结构

主要页面

| 页面名称 | 文件路径 | 功能描述 | | :— | :— | :— | | 文化首页 | FirstPage.html | ACGN 字母视差效果，文化起源介绍，引导探索 | | 主展厅 | index.html | 手风琴式作品导航，八大板块入口 | | 作品角色页 | xxx.html (如 spiritedaway.html) | 人物卡片翻转效果，展示角色简介 | | 剧情介绍页 | xxxStory.html | 文字滑入动画，作品故事概要 | | 作者介绍页 | xxxAuthor.html | 作者定位动画，成就与作品集展示 | | 评价页面 | xxxComment.html | 动态评价展示，BGM 背景音乐播放 | | 经典台词页 | xxxLines.html | 台词动态排列与轮播卡片展示 | | 文化主页 | HomePage.html | 视差滚动效果，ACGN 历史与发展介绍 | | 作品画廊 | ACGN主要代表作品.html | 卡片式作品展示，滚动隐现效果 | | 创意画板 | 画板.html | 在线绘画工具，轮廓选择与保存功能 |

涵盖作品

1. 动画：《千与千寻》、《你的名字》
2. 漫画：《罗小黑战记》、《刺客伍六七》
3. 游戏：《逆转裁判》、《弹丸论破》
4. 小说：《凉宫春日的忧郁》、《龙王的工作》

🚀 快速开始

在线访问

项目已通过 GitHub Pages 自动部署，可直接访问： 👉 https://yankeesean.github.io/ACGN/ACGN/index.html

本地运行

1. 克隆项目

   git clone https://github.com/YANKEESEAN/ACGN.git
   cd ACGN
   

2. 启动本地服务器（推荐使用 Live Server）
   • 使用 VS Code 安装 Live Server 插件
   • 右键点击 FirstPage.html 或 index.html
   • 选择 “Open with Live Server”
3. 直接在浏览器中打开
   • 双击 FirstPage.html 文件即可在浏览器中打开

🛠️ 技术栈

• 前端三件套：HTML5、CSS3、JavaScript (ES6+)
• 布局技术：Flexbox、Grid、响应式设计
• 动画效果：CSS Animation、CSS Transition、JavaScript 动画
• 交互功能：原生 JavaScript DOM 操作、事件处理
• 音频处理：HTML5 Audio API

📁 项目结构

ACGN/
├── FirstPage.html          # 文化首页 - 入口页面
├── index.html             # 主展厅 - 作品导航中心
├── HomePage.html          # 文化主页 - ACGN发展历史
├── ACGN主要代表作品.html    # 作品画廊 - 扩展作品展示
├── 画板.html              # 创意画板 - 绘画互动功能
├── spiritedaway/          # 《千与千寻》系列页面
│   ├── spiritedaway.html
│   ├── spiritStory.html
│   ├── spiritAuthor.html
│   ├── spiritComment.html
│   └── spiritLines.html
├── yourname/              # 《你的名字》系列页面
│   └── (类似结构)
├── luoxiaohei/            # 《罗小黑战记》系列页面
│   └── (类似结构)
├── cike/                  # 《刺客伍六七》系列页面
│   └── (类似结构)
├── nizhuan/               # 《逆转裁判》系列页面
│   └── (类似结构)
├── danwan/                # 《弹丸论破》系列页面
│   └── (类似结构)
├── lianggong/             # 《凉宫春日的忧郁》系列页面
│   └── (类似结构)
├── longwang/              # 《龙王的工作》系列页面
│   └── (类似结构)
├── css/                   # 样式文件目录
├── js/                    # 脚本文件目录
├── images/                # 图片资源目录
├── ACGN/                  # 主要内容资源
│   └── mp3/               # 音频文件
└── README.md              # 项目说明文档

🎨 核心功能

视觉特效

• ✅ 视差滚动效果
• ✅ 卡片翻转动画
• ✅ 文字滑入特效
• ✅ 图片定位动画
• ✅ 手风琴式导航

交互功能

• ✅ 鼠标悬停效果
• ✅ 点击跳转导航
• ✅ 画板绘画工具
• ✅ BGM 音乐播放
• ✅ 作品轮廓选择

内容展示

• ✅ 多作品分类展示
• ✅ 人物角色介绍
• ✅ 剧情故事概要
• ✅ 作者成就展示
• ✅ 用户评价轮播
• ✅ 经典台词展示

📝 详细文档

如需了解每个页面的详细设计说明、实现原理和效果演示，请查看：

• 网页详细介绍.docx - 完整的设计文档与功能介绍

🤝 贡献指南

欢迎提交 Issue 和 Pull Request 来改善这个项目！

1. Fork 本项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 开启 Pull Request

📄 版权说明

本项目仅用于学习和交流目的，所有涉及的 ACGN 作品版权归原作者及相关公司所有。

• 项目代码采用 MIT 许可证
• 资源文件（图片、音频等）仅限教育用途

👥 作者

YANKEESEAN

• GitHub: @YANKEESEAN
• 项目链接: https://github.com/YANKEESEAN/ACGN

---

探索 ACGN 的无限可能，开启你的二次元之旅！ 🚀