こんなに美しいレイアウトがシンプルなHTMLで簡単に実装できるスクリプト -Multiple.js
Post on:2016年6月22日
sponsors
半透明の美しいグラデーションが複数のパネルにまたがり、背景を続き画像として配置するスクリプトを紹介します。
非常にシンプルなHTMLで実装でき、デモを実際に見るとその美しさに感動すら覚えます。
Multiple.js
Multiple.js -GitHub
Multiple.jsのデモ
デモは、ぜひその目で実際に見て、楽しんでください。
スクリプトにはさまざまなオプションが用意されています。
パネル間の溝をなくしたレイアウトもいいですね。
デモページ: ギャップ調整
背景画像やグラデーションを変更することも可能です。
右上のパネルは左のパネル群の続き画像になっています。
デモページ: 背景画像とグラデーションの変更
パネルを歯抜け状態にすることもできます。
デモでは、ランダムにパネルを非表示させます。
デモページ: パネルの削除
各パネルは個別に不透明度を設定することもできます。
Multiple.jsの使い方
Step 1: 外部ファイル
当スタイルシートとスクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 9 10 |
<head> ... <link href="./multiple.css" rel="stylesheet"> </head> <body> ... コンテンツ ... <script src="./multiple.min.js"></script> </body> |
Step 2: HTML
各パネルをdiv要素で実装し、classを加えます。
|
1 2 3 |
<div class="item">コンテンツ</div> <div class="item">コンテンツ</div> <div class="item">コンテンツ</div> |
Step 3: JavaScript
適用する要素を指定し、スクリプトを実行します。
|
1 2 3 4 |
var multiple = new Multiple({ selector: '.item', background: 'linear-gradient(#273463, #8B4256)' }); |
パネル毎に不透明度をしたい時は、個別に記述します。
|
1 2 3 4 5 6 7 8 9 10 11 |
new Multiple({ selector: '.item.second', background: 'linear-gradient(rgb(70, 106, 177), #32A668)', opacity: true }); new Multiple({ selector: '.item.third', background: 'linear-gradient(rgb(70, 106, 177), #32A668)', opacity: .9 }); |
sponsors
