no-image

JavaScript

コンテナのサイズに合わせて要素を動的に拡大・縮小できる「Scalable」

Scalableは、コンテナ領域内にある要素をコンテナのサイズに合わせて動的に拡大・縮小させることができます。スマホやパソコンなど、さまざまな機器のブラウザで快適にコンテンツを閲覧できるWebサイトを作りたい場合に活用したくなりますね。

Scalable

デモ

デモではContainerと書かれたコンテナのサイズを変更することで、コンテナ領域内にある要素を拡大・縮小させることができます。コンテナの右下をドラッグすることで、コンテナサイズを調節することができます。

コンテナを大きくするとそれに合わせて要素も大きくなり、コンテナを小さくするとそれに合わせて要素も小さくなります。コンテナに合わせて動的に要素のサイズも変化するので、いろんなデバイスに対応させたいといったシーンなどで活躍してくれそうですね。

使い方自体もとてもシンプルなので、簡単に実装できます。また、オプションもいくつか用意されていることから、ちょっとしたカスタマイズも可能です。

主なオプションは、align、verticalAlign、containerHeight、minWidth、maxWidth、minScale、maxScaleです。alignの値には、left、center、rightがあり、デフォルト値はleftになっています。verticalAlignの値には、top、center、bottomがあり、デフォルト値はtopです。

また、containerHeightの値には、fixedとautoが用意されていて、デフォルト値はfixedに設定されています。

コンテナ領域内にある要素をコンテナサイズに合わせて拡大・縮小してくれる機能を実装したい人は、ぜひ「Scalable」を使われてみてはいかがでしょうか。

Scalable

関連記事

  1. AOS

    JavaScript

    スクロールに合わせていろんなアニメーションで表示できる「AOS」

    AOSはスクロールに合わせてフェードやフリップ、ズームなどのアニメーシ…

  2. Letter by Letter JS

    JavaScript

    美しいフェードでテキストが徐々に表示されていく「Letter by Letter JS」

    Letter by Letter JSは美しいフェードでテキストを徐々…

  3. Animsition
  4. jQuery Navobile
  5. jQuery Stick ‘em

    JavaScript

    スクロール時にその場所のコンテンツに応じたサイドバーが追従する「jQuery Stick ‘em」

    ちょっと使いどころがありそうなプラグインだったので使い方をメモしときま…

  6. TextFit

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

最近の記事

  1. EH-NA0B
  2. KPS-88
  3. Happy Plugs AIR1
  4. cheero Stream 10000mAh
  5. BOSE HOME SPEAKER 300

アーカイブ

PAGE TOP