MaterializeでParallaxを構築するには下記のように記述します。
Materializeのサイト内のParallaxを確認すると、サンプルがあるのでそれを参考にParallaxの機能を実装してみます。
「index.html」と「script.js」を修正します。
「stylesheet.css」と「sample.JPG」を追加します。
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" /> <title>Materialize_sample</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="./materialize/css/materialize.css" rel="stylesheet" media="screen,projection" /> <link href="./css/stylesheet.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="./materialize/js/materialize.js"></script> <script src="./js/script.js"></script> </head> <body> <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> </body> </html> |
stylesheet.css
1 2 3 4 5 6 7 |
body { height: 1500px; } .parallax-container { height: 300px; } |
script.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
(function ($) { $(function () { $('.button-collapse').sideNav(); $('.dropdown-button').dropdown({ constrain_width: false, hover: true, belowOrigin: true }); $('.parallax').parallax(); }); })(jQuery); |
作成したindex.htmlを実行すると下記のように表示されます。
スクロールに応じて画像自体もスクロールされます。
画像の高さ変更:
1 2 3 |
.parallax-container { height: 600px; } |
ちょっとしたアクセントに使えそうです。
- 参考文献