こんなに美しいレイアウトがシンプルなHTMLで簡単に実装できるスクリプト -Multiple.js

半透明の美しいグラデーションが複数のパネルにまたがり、背景を続き画像として配置するスクリプトを紹介します。

非常にシンプルなHTMLで実装でき、デモを実際に見るとその美しさに感動すら覚えます。

サイトのキャプチャ

Multiple.js
Multiple.js -GitHub

Multiple.jsのデモ

デモは、ぜひその目で実際に見て、楽しんでください。

デモのキャプチャ

デモページ

スクリプトにはさまざまなオプションが用意されています。
パネル間の溝をなくしたレイアウトもいいですね。

デモのキャプチャ

デモページ: ギャップ調整

背景画像やグラデーションを変更することも可能です。
右上のパネルは左のパネル群の続き画像になっています。

デモのキャプチャ

デモページ: 背景画像とグラデーションの変更

パネルを歯抜け状態にすることもできます。
デモでは、ランダムにパネルを非表示させます。

デモのキャプチャ

デモページ: パネルの削除

各パネルは個別に不透明度を設定することもできます。

デモのキャプチャ

不透明度を個別に設定したデモ

Multiple.jsの使い方

Step 1: 外部ファイル

当スタイルシートとスクリプトを外部ファイルとして記述します。

Step 2: HTML

各パネルをdiv要素で実装し、classを加えます。

Step 3: JavaScript

適用する要素を指定し、スクリプトを実行します。

パネル毎に不透明度をしたい時は、個別に記述します。

top of page

©2017 coliss