jQuery

【jQuery】画面のあらゆるサイズでページの中央にとどまるvResponse

May 27, 2017
vResponse

vResponse.jsは、アニメーション化された垂直レスポンシブディビジョンを作成することを可能にするjQueryプラグイン。

Include

jQueryとvResponse.jsを追加します。

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="vResponse.min.js"></script>

Add trigger

data-toggle="vResponse"というトリガーを追加。

<div class="main" data-toggle="vResponse"></div>

Activate vResponse.js

ページ読み込み後にvResponse.jsを有効にする

$(function() {$('[data-toggle="vResponse"]').vResponse();});

ブラウザのサイズを変更するたびにvResponse.jsを有効にする

$(window).resize(function(){$('[data-toggle="vResponse"]').vResponse();});

ページ読み込み後のvResponse.jsの有効化

$(function() {$('[data-toggle="vResponse"]').vResponse();});
$(window).resize(function(){$('[data-toggle="vResponse"]').vResponse();});

アニメーションスピード設定

Example (750 milliseconds):

$(function() {$('[data-toggle="vResponse"]').vResponse(750);});