こんにちは、ハル@haru_elpisです。
jQueryでアニメーションを簡単に実装する備忘録です。
目次
animatedModal.js 使い方
ダウンロード
https://github.com/joaopereirawd/animatedModal.js
ダウンロードした「animatedModal.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。
デモページ
https://joaopereirawd.github.io/animatedModal.js/
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>
[affi id=23]
コメント