Skip to content

SUGO_ANALYSIS.md

Latest commit

 

History

History
104 lines (85 loc) · 3.11 KB

SUGO_ANALYSIS.md

File metadata and controls

104 lines (85 loc) · 3.11 KB

SUGO.com 代码分析报告

核心技术栈

  1. Nuxt.js - Vue.js 框架
  2. jQuery fullPage.js - 全屏滚动库（关键！）
  3. jQuery - DOM 操作
  4. Bootstrap - UI 框架

关键发现

1. 使用 fullPage.js 实现全屏滚动

  • 页面使用 jquery.fullPage.min.js 库
  • HTML 结构：3个 .fp-section，每个代表一个全屏页面
  • body 有 fp-enabled 和 fp-viewing-0 类
  • html 有 fp-enabled 类

2. 背景切换机制

  • 背景容器：<div id="chBgColor" class="bgColorArea firstColor">
  • 背景图片：<img class="bg" src="bg.png">
  • 通过改变 bgColorArea 的类来切换背景：
    • firstColor - 第一张背景（bg.png）
    • secondColor - 第二张背景（page1.png）
    • thirdColor - 第三张背景（page2.png）
  • 背景图片是 absolute 定位，left: 265.5px，不是全屏覆盖

3. 页面图片（page1, page2, page3）

  • 这些图片不是背景，而是在不同的 fullPage section 中作为内容显示
  • 每个 section 包含一个 .fp-tableCell，里面是页面图片
  • 图片随 section 切换而显示/隐藏

4. 固定元素

  • Logo 和下载按钮是固定的，不随滚动移动
  • 使用 fixed 或 absolute 定位

5. 文字和手机预览的滚动

  • 文字内容和手机预览图会随着滚动向上移动
  • 使用 CSS transform 或 JavaScript 来实现视差效果

HTML 结构

<div id="__nuxt">
  <div class="app-container">
    <div class="out-container loaded">
      <!-- 背景区域 -->
      <div id="chBgColor" class="bgColorArea firstColor">
        <img src="bg.png" class="bg">
      </div>
      
      <!-- 容器 -->
      <div class="container">
        <!-- Logo -->
        <div class="sugo-logo">
          <img src="logo.png" class="img-responsive">
        </div>
        
        <!-- 下载按钮 -->
        <div class="download-source">
          <a href="..."><img src="..."></a>
        </div>
        
        <!-- 文字内容 -->
        <div>
          <p>Have fun with friends.</p>
          <p>100% of our users...</p>
        </div>
      </div>
      
      <!-- fullPage sections -->
      <div class="section fp-section active">
        <div class="fp-tableCell">
          <img src="page1.png">
        </div>
      </div>
      <div class="section fp-section">
        <div class="fp-tableCell">
          <img src="page2.png">
        </div>
      </div>
      <div class="section fp-section">
        <div class="fp-tableCell">
          <img src="page3.png">
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript 逻辑

  1. fullPage.js 初始化：配置全屏滚动
  2. 背景切换：监听 fullPage 的 onLeave 事件，切换 bgColorArea 的类
  3. 内容滚动：使用 CSS transform 或 JavaScript 实现文字和图片的视差滚动

实现建议

由于我们使用 React + framer-motion，不能直接使用 jQuery fullPage.js，但可以：

  1. 使用 framer-motion 的 useScroll 和 useTransform 来模拟 fullPage 效果
  2. 根据滚动进度切换背景图片的显示
  3. 实现文字和图片的视差滚动效果
  4. 保持 Logo 和下载按钮固定