Blog 已遷移 http://steventtud.com,logdown 版本不再更新,麻煩大家前往新網站觀看^^

Demo:使用Matirialize框架實現視差滾動

完成品展示頁

Materialize是除了Bootstrap以外現今相當熱門的前端框架,可以製作的網頁類型相當廣泛,未來將使用Materialize來開發一些小作品,是今天練習的主要目的。

實現Materialize框架提供的視差滾動效果

視差滾動的效果由materialize提供的Parallax JS 套件來完成,效果可以讓圖片滿板,並且有視差效果。步驟如下:

  1. 自行撰寫.parallax-container包覆需要跟圖片有視差效果的區域。
  2. 第二層的最下方加上.parallax並包覆圖片即可完成視差效果。
<section class="slogan-section  margin-bottom parallax-container valign-wrapper ">
    <div class="container">
        <h3 class="center-align slogan-description">A modern responsive front-end framework based on Material Design</h3>
    </div><!-- container -->
    <div class="parallax"><img src="images/background2.jpg" alt="Unsplashed background img 2"></div>
</section><!-- slogan -->
 .parallax-container {
     min-height: 380px;
     line-height: 0;
     height: auto;
     color: rgba(255,255,255,.9);
     position: relative;
     overflow: hidden;
 }

其他學習記錄

  1. 一般區塊的垂直置中使用materialize的valign-wrapper來達到垂直置中的效果。

  2. Footer使用width+line-height的垂直置中技巧。垂直置中的對象必須是外層的footer.copyright,包在container裡面會造成多餘的空白。

  3. 修飾某些元件時除了class名稱以外,需加上元件名稱,來解決沒有蓋過原本framework的CSS的問題。例如:使用.footer-copyright無法順利設定背景顏色,但若改成footer.footer-copryright則可以順利完成。

  4. 如果有以下的突出狀況,可以加上overflow: hidden;即可解決。