<commit_before># jQuery Lively Layout - HTMLのレイアウト表示をアニメーションで演出するjQueryプラグイン

HTMLを表示する際に、各パーツごとに左右からビューン、とか上からドスーンみたいなアニメーションを指定できるjQueryプラグインです。

[BootStrapのレイアウトを使用したデモ](http://ktty1220.ap01.aws.af.cm/jquery.lively-layout/demo.html)

動きのあるHTMLを実装したい場合にどうそ。でもやりすぎると鬱陶しいかもしれません・・・

## 使用方法

※ jQueryの他に[jQuery Easing Plugin](http://gsgd.co.uk/sandbox/jquery/easing/)が必要になります。

1. HTML内で __jquery.js__ 、 __jquery.easing.js__ 、 __jquery.lively-layout.js__ を読み込みます。

        <script type="text/javascript" src="/path/to/jquery.js"></script>
        <script type="text/javascript" src="/path/to/jquery.easing.js"></script>
        <script type="text/javascript" src="/path/to/jquery.popn-socialbutton.js"></script>

2. アニメーション表示させたい要素をCSSで`visibility: hidden`で非表示状態にしておきます。

    ※ __`display: none`では非表示の要素の位置やサイズも消えてしまう為、正常に動作しません。__

        // `footer`、`.sidebar-nav`、`.navbar`の要素をアニメーションさせる場合のCSS例
        footer,
        .sidebar-nav, 
        .navbar {
          visibility: hidden;
        }

3. __アニメーション設定の配列__ と __完了時のコールバック関数__ を引数に`$.livelyLayout`をコールします。

        // アニメーション設定
        var config = [{<commit_msg>README.mdのtypo修正<commit_after># jQuery Lively Layout - HTMLのレイアウト表示をアニメーションで演出するjQueryプラグイン

HTMLを表示する際に、各パーツごとに左右からビューン、とか上からドスーンみたいなアニメーションを指定できるjQueryプラグインです。

[BootStrapのレイアウトを使用したデモ](http://ktty1220.ap01.aws.af.cm/jquery.lively-layout/demo.html)

動きのあるHTMLを実装したい場合にどうそ。でもやりすぎると鬱陶しいかもしれません・・・

## 使用方法

※ jQueryの他に[jQuery Easing Plugin](http://gsgd.co.uk/sandbox/jquery/easing/)が必要になります。

1. HTML内で __jquery.js__ 、 __jquery.easing.js__ 、 __jquery.lively-layout.js__ を読み込みます。

        <script type="text/javascript" src="/path/to/jquery.js"></script>
        <script type="text/javascript" src="/path/to/jquery.easing.js"></script>
        <script type="text/javascript" src="/path/to/jquery.lively-layout.js"></script>

2. アニメーション表示させたい要素をCSSで`visibility: hidden`で非表示状態にしておきます。

    ※ __`display: none`では非表示の要素の位置やサイズも消えてしまう為、正常に動作しません。__

        // `footer`、`.sidebar-nav`、`.navbar`の要素をアニメーションさせる場合のCSS例
        footer,
        .sidebar-nav, 
        .navbar {
          visibility: hidden;
        }

3. __アニメーション設定の配列__ と __完了時のコールバック関数__ を引数に`$.livelyLayout`をコールします。

        // アニメーション設定
        var config = [{
{'fraction_non_alphanumeric': 0.13419527418635754, 'fraction_numerical': 0.008024966562639322, 'mean_word_length': 3.9646017699115044, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1389949', 'n_tokens_mistral': 1202, 'n_tokens_neox': 1136, 'n_words': 100}