2015-10-12所有文章 Luka

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

完成品展示頁

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

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

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

自行撰寫.parallax-container包覆需要跟圖片有視差效果的區域。
第二層的最下方加上.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;
}

其他學習記錄

一般區塊的垂直置中使用materialize的valign-wrapper來達到垂直置中的效果。
Footer使用width+line-height的垂直置中技巧。垂直置中的對象必須是外層的footer.copyright，包在container裡面會造成多餘的空白。
修飾某些元件時除了class名稱以外，需加上元件名稱，來解決沒有蓋過原本framework的CSS的問題。例如：使用.footer-copyright無法順利設定背景顏色，但若改成footer.footer-copryright則可以順利完成。
如果有以下的突出狀況，可以加上overflow: hidden;即可解決。

#HTML javascript

評論