【animatedModal.js】jQueryでアニメーションを簡単に実装する方法

スポンサーリンク
HTML・JavaScript..

こんにちは、ハル@haru_elpisです。

jQueryでアニメーションを簡単に実装する備忘録です。

animatedModal.js 使い方

ダウンロード

joaopereirawd/animatedModal.js
animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transit...

ダウンロードした「animatedModal.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

デモページ

animatedModal.js
animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transiti...

head

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="yourPath/animatedModal.min.js"></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">
</head>

HTML

<body>
    <!--Call your modal-->
    <a id="demo01" href="#animatedModal">DEMO01</a>

    <!--DEMO01-->
    <div id="animatedModal">
        <!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID  class="close-animatedModal" -->
        <div class="close-animatedModal"> 
            CLOSE MODAL
        </div>
            
        <div class="modal-content">
                  <!--Your modal content goes here-->
        </div>
    </div>
</body>

javascript

<script>
  $("#demo01").animatedModal();
</script>

コメント

タイトルとURLをコピーしました