こんにちは、ハル@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...
github.com
ダウンロードした「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...
joaopereirawd.github.io
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>
コメント