編輯中，僅請見諒

主要參考 CSS SECRETS 這本書裡面的內容作筆記~

before / after 的圖片效果

在比較差異大的圖片時，並排是個不錯的選項。

例如之前比較各個 filter 效果時，就是用並排的：

但當兩張圖很像時，差別就不是這麼好看出來了

例如：https://jsfiddle.net/lazy_shyu/6k1dpx4g/1/

尤其對我這種眼力是負值的人 (=艸 =" )

要解決這個問題，其中一個解法是利用 hover 效果

https://jsfiddle.net/lazy_shyu/6k1dpx4g/2/

有點像之前全聯的廣告的效果，總之可以明確地看出圖片不一樣的地方。

另外還可以使用 resize 做出拖拉互動的效果~

https://jsfiddle.net/lazy_shyu/6k1dpx4g/6/

<div class="image-slider">
    <div class="image-before"><img src="圖片一" alt=""></div>
    <div class="image-after"><img src="圖片二"  alt=""></div>
</div>

.image-before {
    width: 2 * $button-size; /* 最小寬度 */
    max-width: $img-size;    /* 最大寬度 */
    overflow: hidden;
    resize: horizontal;      /* 可以水平設定大小 */
}

套用在 filter 的呈現上，效果也很不錯 <3

https://jsfiddle.net/lazy_shyu/6k1dpx4g/7/

類似的呈現還有：

1. 比較圖片解析度
2. 漫畫 上色前 / 上色後

sticky 效果

position: sticky 是一個很棒的效果，但可惜的是 chrome 一直不支援。

almost there~!! chrome 快要支援了

以前的 instagram 的 app 體驗就很好

在網路上要找圖找不到，結果想用螢幕錄影時才發現改掉了 Orz )
whyyyyyy 我真的覺得那樣體驗很好的 O____Q