大家好

今天要用固定背景
作出滑鼠向下滾動換背景
像是下列範例
https://codepen.io/stefanjudis/pen/nrzHI

parallax 說明
使用容器元素並將背景圖像添加到具有特定高度的容器中。然後使用background-attachment: fixed創建實際的視差效果。其他背景屬性用於完美地對圖像進行居中和縮放
出處：https://www.w3schools.com/howto/howto_css_parallax.asp

<div class="parallax"></div>
<div class="text">文章</div>

.parallax{
    background-image: url("圖像");
    min-height: 500px; 
    /* 沒內文時可以看到的最小高度 */

    background-attachment: fixed; /* 固定圖像 */
    background-position: center center; /* 圖像置中 */
    background-size: cover;
}

當文章的背景非透明時
向下滾動就會看到背景不動
文章向上蓋掉背景

背景2個以上時
因為設定差別只在圖像不同
所以也可以簡化 CSS 把圖像和固定屬性分開

<div class="parallax img-1"></div>
<div class="text">文章</div>
<div class="parallax img-2"></div>
<div class="text">文章</div>
<div class="parallax img-3"></div>
<div class="text">文章</div>

.parallax{
    min-height: 500px; 
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}
.img-1{
    background-image: url("圖像");
}
.img-2{
    background-image: url("圖像");
}
.img-3{
    background-image: url("圖像");
}

之後要增加、刪減圖像就不會太大一串

接下來的例子同上
https://codyhouse.co/demo/page-scroll-effects/fixed.html
另外也有其他效果
像是翻頁的特效
努力試到了大半夜
還是作不出來

最後才發現一開始就搞錯了
https://codyhouse.co/gem/page-scroll-effects/

原來 Velocity.js 不是說存成 Velocity.js
而這是作效果的插件

Velocity.js 資料
英文： http://velocityjs.org/
中文： http://www.mrfront.com/docs/velocity.js/

恩，這翻頁的特效滿有趣的
給大家參考看看

--- 明日待續。