菜菜菜的前端學習日誌 - Day30

最後一天

終於到了最後一天了，但是還是不能鬆懈呀

所以趕緊來發最後一篇文了

簡易視差滾動

今天最後一天了就來顧一下大家的眼睛好了

今天要做一個簡單的視差滾動

效果就像是下面這樣

實作

首先我們先建立架構

它主要的架構就是3個 DIV

我們就建立3個 class 為 parallax 的 DIV 吧

<div class="parallax">Hello my name is Andy!!</div>
<div class="parallax">Hello my name is Andy!!</div>
<div class="parallax">Hello my name is Andy!!</div>

接下來我們就稍微排版一下

.parallax{
  width: 100vw;
  height: 100vh;
  font-size: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

好的接下來就為三個 DIV 加上不同的背景吧

因為要加上不同背景所以分別在給3個 DIV 不同的 class

<div class="parallax bg1">Hello my name is Andy!!</div>
<div class="parallax bg2">Hello my name is Andy!!</div>
<div class="parallax bg3">Hello my name is Andy!!</div>

.bg1{
  background: url(http://static1.allkpop.com/upload/2014/12/af_org/clara_1418864727_af_org.jpg) no-repeat;
  background-size: cover;
}
.bg2{
  background: url(http://image5.tuku.cn/pic/wallpaper/meinv/lichengminbizhi/008.jpg) no-repeat;
  background-size: cover;
}
.bg3{
  background: url(http://old.bz55.com/uploads/allimg/140331/1-1403311F206.jpg) no-repeat;
  background-size: cover;
}

其實這樣已經很漂亮了

因為照片的女主角很漂亮哈哈哈哈哈！！！

但是這不是我們要的效果

所以我們再加上最重要的一個屬性吧

background-attachment: fixed;

加上這一個屬性之後，一切就都不一樣了

WOW!!! 一個簡單的屬性就可以產生這麼棒的效果

CSS 真的是太神啦！！！

當然也有其他屬性可以產生更棒的視差滾動效果

例如：用 transform 透過透視點也可以達到很棒的視差滾動效果

當然更進階的可以用 JS 去控制會更棒

有興趣的邦友們可以自己去嘗試一下囉～～