和田憲幸のブログ

札幌市白石区在住、個人事業のWebエンジニア 和田憲幸(45歳)のブログです。

ランダムでブロックを表示するスクリプト

「ランダムで複数の画像を表示Javascript」を作ったのは6年前の話なのか・・・。

2012-02-21 10:26:11
入力時間 / 06:09

RandVisual.js

6年前につくったランダムで複数の画像を表示Javascriptというのを今風にしてみた。6年も前の話しなんですねぇ・・・。時間が経つのは早いですね。ほんと光陰矢の如しやでぇ。

どんな感じかと言うとこんな感じです。
synck.jpのフロントページを久々に更新しようかなと思って、こんな感じにしたかったのでつくりました。

元ネタは確かアップルのサイトだったような気がする。本当にアップルをパクる人生。
ありがとうアップル。

特徴

特徴としては単純にランダムで表示するのではなく、大きいものと小さいものを混在させることができる点にあります。大きいエリアと小さいエリアに分かれてるんですけど、重複しないようにランダムで表示させてるってことね。

目的

目的としては「大きくドーンと見せたい!」んだけど「複数あるのよね・・・」で、「どれも甲乙付けがたいんじゃー!」という場合に使います。優柔不断なあなたにピッタリ。

まだベータ版ですがダウンロードはコチラから。

RandVisual.js Download

追記

実装例です。サンプルではわかりやすいように出力されるタグは空にしてますが、どちらにしても上書きされるのでこの実装例のように内包しちゃうことで空タグというミッタクナイことをしなくてすみます。あぁ美しきマークアップよ。

TAG

P.1095