javascript - イメージクラウドを作成する

Question

画像を積み重ねて、見た回数に応じてサイズを変更する画像クラウドを作りたい。

クラウドもおそらく事前定義されたスペースを取ります。javascriptで可能ですか、それともSVG / Canvasを使用する必要がありますか？

これに似たもの：hitlantis

任意のポインタ/参照がいいでしょう。

Answer 1

あなたが見るべきいくつかのこと：

• javascript Image Resize-正しく見えるように要素を移動する必要があるかもしれませんが、これはおそらくCSSで行うことができます
• CSSトランジション
• jQueryのmouseenterとmouseleave
• css：hover

:hover正しいトランジション/スタイルで適切に使用すれば、Javascriptは必要ないかもしれません。

編集：

レイヤリングには、を使用しますz-index。要素をどのように配置するかわからないので、要素を配置するためのアルゴリズムを考え出します（ランダムでうまくいく可能性があります）。それが完了したら、、position: absolute設定topを使用して、right生成した位置に移動します。

配置に使用できるアルゴリズム：

• ランダム（easy peasy :) x = Math.random() * maxWidth - radius + centerX、yについても同様
• フォーゲルのモデルを使用したフィボナッチベース-簡単な配布を保証します
• 類似の画像をクラスタリングする-これは少し難しく、クラスタリングロジックによって異なります

他にもあると思います。単純なもの（ランダム）を実行し、すべてを機能させてから、必要に応じて後でより興味深いアルゴリズムを作成することをお勧めします。