敘述型
新聞專題網頁

目的：打造引人入勝的引言，讓讀者進入我說故事的節奏。

手法：沈浸式設計，讓讀者scrolling時改變background image的opacity，淡入淡出帶出以下故事。在HTML上先在div上疊三張100vh的圖，設不同z-index讓第一張跑到最上面出現，第三張最後。在jQuery上偵測捲動，會用到的變數有「視窗捲動了多少、intro以上的高度和intro本身的高度、intro捲動了多少」

邏輯：當讀者在intro的div內捲動時會觸發，在三層圖片上加一個css狀態，讓透明度「以整個intro高度三分之一」的比率改變。數值跑動上面我選擇在圖片上加了data seq以便調整參數。

目的：滑動時產生feedback讓讀者不會無聊，看文字後對圖片產生預期心理。
‍
手法：讓圖片由下滑至上。我在要滑動的照片上加上一個 slideanimation 的class 讓照片能被抓取，並用transform做另一個slide的class代表滑動狀態，參數上設「不同的透明度與Y的高度」。接著在 jQuery上一樣監聽捲動，抓每一個有設slideanimation的物件，然後用if設定「滑動到特定的地方才觸發」。

目的：作為整個敘事型新聞專題的「故事主體」，希望做到「翻故事繪本」的體驗，所以選用橫向捲軸一步步帶出邱大哥每個階段的抉擇與難關，用沈浸式設計讓讀者能夠清晰呈現出邱大哥的輪廓。

手法：視覺上先將底圖的邱大哥去背然後各疊一個不同透明度的，再用ai畫輪廓突出；動態上讓讀者能夠再往下滑的同時，讓整塊等速率向右翻，同時因為長達十二張圖，所以在上方也外加了一個閱讀進度條，給讀者feedback。橫向捲軸所呈現在讀者眼前的畫面是「一個很長的div，並用row等分成十二個100vw」，但沒做任何設定的話一般而言只會一直往下跑不會往右滑，所以我選擇用jQuery來調整。

邏輯：先在要呈現的長div外面包一個很直的div，並設sticky-top把外面定住（有點像是L形交疊，往下慢慢變成十字，最後變成另一邊的L形）。然後在長div的部分加上horizontal的class讓他可以被抓取，並在jQuery上設定「當在這個部分內滑動時觸發」：「你滑了外面這個直直直div多少%，你的left位置就變動多少%」。接著扣掉window width的視窗寬度，讓上下左右長條的滑動距離剛剛好。最後，我設定進度條sticky-top年在最上面，然後把橫向地方的position往下移進度條的高度，讓進度條能和下方頁面一起固定在上方同時呈現。