六角學院前端精神時光屋8/9（Parallax Scrolling）

Demo

心得

每次看到視差滾動網站都覺得很動人，原本使用skrollr，但聽說作者停者更新了（！？所以改用TweenMax﹐、TimelineMax，但第一次使用就要挑戰這麼複雜的動畫，有點跨級打怪的感覺，很多觀念和功能並沒有很熟悉就給它硬用下去了，不過也因此認識了TweenMax，發現他是一個非常棒的套件，後續有時間可以再投入更多時間去研究它，或許要架個人網站可以用到！
不過這次最困難的點應該是在於計算、微調很多元件的動畫時間、位置，很多值都是寫死的，
如果要做成RWD可能要打掉重練了...
而且花最多時間的地方應該是在css...

原始設計稿

第八週設計稿。

花費時間

大約3天左右，每天約4-6小時。

所有參考的資料

1. 看完Hahow吳哲宇大大76章-TimelineMax 活用時間軸與SVG動畫

幾個關鍵和需要注意的細節

怕自己忘記的筆記、概念，非實際原始碼。

開場

1. 每一個大區塊(section))致上長這樣 section{ position: fixed; width: 100%; height: 100vh; }
2. 由js判斷滾輪位置去切換或移除每一個section內容
3. 把html、body的overflow:hidden;
4. 動畫最後讓整個開場opacity:0(3s)

問題區塊

1. 動畫淡出後，問題區塊再淡入

2. 只用一個區塊，問題內容是js動態產生，非寫死在html內的

    var data = [
      {
        index: 0,
        question: "這是第一個問題",
        info: "這裡可以放說明",
        answer: [
          {
            ans: "分數+0", //答案一
            s: 0 //分數
          },
          {
            ans: "分數+1",
            s: 1
          },
          {
            ans: "分數+2",
            s: 2
          }
        ]
      }
    ]
   

3. 背景動畫直接用css animate

4. 參考資料屬性

5. 將每個問題的答案值存在html的資料屬性(data-* attribute)中，方便得知使用者選到哪個答案，並將他累積至score變數中。

最後結算

1. 作答完成後，將整個作答區的內容完全清除

$(".begin").remove()

2. 將最後的滾動動畫直接fadeIn()進來

代表這整個區塊原本就存在畫面上只是透明度是0,還沒開始跑。

3. 打開overflow
4. 將動畫停在set之後，用滑鼠來控制
5. 最後，我將最後的動畫分層這幾層

• 三角形背景群
• 文字:作答完成
• 大三角型
• 正方形背景群
• 文字:分析中
• 大正方形
• 圓形背景群
• 文字:你得到了幾分
• 大圓形
• 結果

最後的最後

其實在手機上做視差滾動效果真的很棒，可惜技術還不夠純熟，
未來自己應該會自己找個範例來玩玩看，這次的挑戰比較急一點所以沒有學得很扎實。