每次看到視差滾動網站都覺得很動人,原本使用skrollr,但聽說作者停者更新了(!?所以改用TweenMax﹐、TimelineMax,但第一次使用就要挑戰這麼複雜的動畫,有點跨級打怪的感覺,很多觀念和功能並沒有很熟悉就給它硬用下去了,不過也因此認識了TweenMax,發現他是一個非常棒的套件,後續有時間可以再投入更多時間去研究它,或許要架個人網站可以用到!
不過這次最困難的點應該是在於計算、微調很多元件的動畫時間、位置,很多值都是寫死的,
如果要做成RWD可能要打掉重練了...
而且花最多時間的地方應該是在css...
大約3天左右,每天約4-6小時。
- 看完Hahow吳哲宇大大76章-TimelineMax 活用時間軸與SVG動畫
怕自己忘記的筆記、概念,非實際原始碼。
- 每一個大區塊(section))致上長這樣 section{ position: fixed; width: 100%; height: 100vh; }
- 由js判斷滾輪位置去切換或移除每一個section內容
- 把html、body的overflow:hidden;
- 動畫最後讓整個開場opacity:0(3s)
-
動畫淡出後,問題區塊再淡入
-
只用一個區塊,問題內容是js動態產生,非寫死在html內的
var data = [ { index: 0, question: "這是第一個問題", info: "這裡可以放說明", answer: [ { ans: "分數+0", //答案一 s: 0 //分數 }, { ans: "分數+1", s: 1 }, { ans: "分數+2", s: 2 } ] } ]
-
背景動畫直接用css animate
-
參考資料屬性
-
將每個問題的答案值存在html的資料屬性(data-* attribute)中,方便得知使用者選到哪個答案,並將他累積至score變數中。
- 作答完成後,將整個作答區的內容完全清除
$(".begin").remove()
- 將最後的滾動動畫直接fadeIn()進來
代表這整個區塊原本就存在畫面上只是透明度是0,還沒開始跑。
- 打開overflow
- 將動畫停在set之後,用滑鼠來控制
- 最後,我將最後的動畫分層這幾層
- 三角形背景群
- 文字:作答完成
- 大三角型
- 正方形背景群
- 文字:分析中
- 大正方形
- 圓形背景群
- 文字:你得到了幾分
- 大圓形
- 結果
其實在手機上做視差滾動效果真的很棒,可惜技術還不夠純熟,
未來自己應該會自己找個範例來玩玩看,這次的挑戰比較急一點所以沒有學得很扎實。