dayjournal memo

Total 974 articles!!

Materialize #004 – Parallax

Yasunori Kirimoto's avatar

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


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

Materialize_004_01


「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を実行すると下記のように表示されます。 スクロールに応じて画像自体もスクロールされます。

Materialize_004_02


画像の高さ変更:


.parallax-container {
    height: 600px;


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



book

Q&A