Reframe.js

JavaScript

特定の要素をレスポンシブ化してくれる「Reframe.js」

Reframe.jsはレスポンシブに対応していない特定の要素をレスポンシブ化してくれるスクリプトです。とても軽量&使い方もカンタンなので、気軽に実装できるのが魅力です。とくにインラインフレームやビデオなど埋め込み型コンテンツには最適みたいですね。

インラインフレームや埋め込み動画などに最適

デモ

デモではとてもかわいいネコの動画が設置されています。実際にブラウザサイズを縮小して確認してみたところ、ちゃんとレスポンシブに対応していました。

使い方はとってもカンタンで、reframe.jsとcss/scssを読み込み、以下のようにセットするだけです。

reframe('selector');

また、オプションで自分の好きなクラス名を指定することも可能です。

reframe('selector', 'classname');

複雑な機能もなくシンプルでとても使いやすいと思います。インラインフレームや埋め込み動画などを手軽にレスポンシブ化させたいという人は、ぜひ活用されてみてはいかがでしょうか?

自分でイチからレスポンシブに対応させているヒマがない人には最適ですね。というわけで、レスポンシブでない要素をレスポンシブに対応させることができる「Reframe.js」のご紹介でした。

Reframe.js

iPhone 7(iOS10)を傾けた時に画面が表示される(スリープ解除)機能をオフにする設定方法前のページ

多彩なCSSアニメーションを実現できる「Choreographer-js」次のページChoreographer-js

関連記事

  1. jAnimate

    JavaScript

    フリップやバウンスなどのアニメーションを要素に実装できる「jAnimate」

    jAnimateはフリップやバウンスなどといったアニメーションを要素に…

  2. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

  3. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

  4. jfMagnify
  5. Before and after slider
  6. jQuery Pretty Dropdowns

最近の記事

  1. 芳醇な香りのラムレーズンサンド
  2. Aモーニングセット
  3. 白トリュフの塩パンやメロンパンなど
  4. 東京都現代美術館
  5. スーリア バターチキン

アーカイブ

PAGE TOP