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. topbar

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  2. no-image

    JavaScript

    スマホなどに最適なテーブルを実装できる「Mobile-Friendly Table」

    Mobile-Friendly Tableはスマホなどのモバイルに最適…

  3. JavaScript

    ショータイムが始まる前のスポットライトのようなjQueryプラグイン「Spotlight」

    Spotlightはショータイムが始まる前のスポットライトのようなアニ…

  4. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

  5. JavaScript

    文章の段落にコメントできるjQueryプラグイン「SideComments.js」

    おもしろそうだったのでメモがてらご紹介。SideComments.js…

  6. no-image

最近の記事

  1. 椿屋特製アイス珈琲
  2. 有栖川公園
  3. グーディオ オーガニックチョコレート(ミント)
  4. チキンバターマサラとシュリンプバターマサラ
  5. 恵比寿のダ・ミケーレのピザ

アーカイブ

PAGE TOP