Reframe.js

JavaScript

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

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

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

デモ

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

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

reframe('selector');

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

reframe('selector', 'classname');

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

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

Reframe.js

関連記事

  1. Multi-Screen.js
  2. jQuery Star Flashing Effect
  3. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  4. PhotoSwipe

    JavaScript

    タッチジェスチャーにも対応したイメージギャラリー・PhotoSwipe

    PhotoSwipeはスマホやタブレットのタッチジェスチャーにも対応し…

  5. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  6. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

最近の記事

  1. Soundcore Ace A1
  2. cheero USB-C PD Charger 60W
  3. DY-S01
  4. OWL-QI10W04

アーカイブ

PAGE TOP