Awesome
Bulma Modal FX
A set of modal window effects with CSS transitions and animations for Bulma. Very inspired by this Codrops resource/article https://github.com/codrops/ModalWindowEffects
Demo: https://postare.github.io/bulma-modal-fx Bulma docs: https://bulma.io/documentation
Effects
class modal-fx-
+ effect
example: modal-fx-newsPaper
- normal
- fadeInScale
- slideRight
- slideLeft
- slideTop
- slideBottom
- fall
- slideFall
- newsPaper
- 3dFlipVertical
- 3dFlipHorizontal
- 3dSign
- 3dSignDown
- superScaled
- 3dSlit
- 3dRotateFromBottom
- 3dRotateFromLeft
Examples
https://postare.github.io/bulma-modal-fx/
INSTALL
npm i bulma-modal-fx
or simply download latest release: https://github.com/postare/bulma-modal-fx/releases/
GETTING STARTED
Include the plugin css file:
<link rel="stylesheet" href="dist/css/modal-fx.min.css" />
(optional) Include the plugin just before body closing tag:
<script type="text/javascript" src="dist/js/modal-fx.min.js"></script>
Or use a CDN
<link rel="stylesheet" href="https://unpkg.com/bulma-modal-fx/dist/css/modal-fx.min.css" />
<script type="text/javascript" src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script>
HTML MARKUP
<!-- trigger button -->
<span class="button modal-button" data-target="modal-id">Open modal</span>
<!-- related modal with fx class "modal-fx-fadeInScale" -->
<div id="modal-id" class="modal modal-fx-fadeInScale">
<div class="modal-background"></div>
<div class="modal-content">
<!-- Any other Bulma elements you want -->
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- To activate the modal, just add the is-active modifier on the .modal container -->
<div id="modal-id" class="modal modal-fx-fadeInScale is-active"></div>[...]
MODIFIERS
Class modifiers for .modal
:
.modal-pos-top
: modal positioned on top.modal-pos-bottom
: modal positioned on bottom
Class modifiers for .modal-content
:
.is-huge
: 100% width modal.is-tiny
: 400px width modal.is-image
: if the content is an image
SASS VARIABLES
// Modal minimal setup
$transition-duration: .3s;
$transition-duration-newsPaper: .7s;
$transition-duration-3dslit: .5s;
$modal-perspective: 1300px;
$modal-bg-color: rgba($black,.86);