dayjournal | Materialize #004

MaterializeでParallaxを構築するには下記のように記述します。

Materializeのサイト内のParallaxを確認すると、サンプルがあるのでそれを参考にParallaxの機能を実装してみます。

「index.html」と「script.js」を修正します。「stylesheet.css」と「sample.JPG」を追加します。

index.html




    
    
    Materialize_sample

    
    
    

    
<script src="./materialize/js/materialize.js"></script>
<script src="./js/script.js"></script>


<ul id="dropdownTop" class="dropdown-content">
    <li><a href="collapsible.html">JS 01</a></li>
    <li><a href="collapsible.html">JS 02</a></li>
    <li><a href="collapsible.html">JS 03</a></li>
</ul>

<nav>
    <div class="nav-wrapper">
        <a href="#!" class="brand-logo">Logo</a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
        <ul class="right hide-on-med-and-down">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a class="dropdown-button" href="#!" data-activates="dropdownTop">Javascript<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
            <li><a href="mobile.html">Mobile</a></li>
        </ul>
        <ul class="side-nav" id="mobile-demo">
            <li><a href="sass.html">Sass</a></li>
            <li><a href="badges.html">Components</a></li>
            <li><a href="collapsible.html">Javascript</a></li>
            <li><a href="mobile.html">Mobile</a></li>
        </ul>
    </div>
</nav>

<h1>Hello, world!</h1>

<div class="parallax-container">
    <div class="parallax"><img src="./img/sample.JPG"></div>
</div>



<br>

### stylesheet.css

```css

body {
    height: 1500px;
}

.parallax-container {
    height: 300px;




script.js

(function ($) {
    $(function () {

        $('.button-collapse').sideNav();

        $('.dropdown-button').dropdown({
            constrain_width: false,
            hover: true,
            belowOrigin: true
        });

        $('.parallax').parallax();

    });
})(jQuery)



作成したindex.htmlを実行すると下記のように表示されます。
スクロールに応じて画像自体もスクロールされます。



画像の高さ変更：

.parallax-container {
    height: 600px;




ちょっとしたアクセントに使えそうです。









参考文献

Materialize

dayjournal memo

Materialize #004 – Parallax

Yasunori Kirimoto 2016/5/30

index.html

script.js