bulma-modal-fx

A set of modal window effects with CSS transitions and animations for Bulma.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
bulma-modal-fx
118111.1.15 years ago5 years agoMinified + gzip package size for bulma-modal-fx in KB

Readme

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: ```html ``` (optional) Include the plugin just before body closing tag: ```html ``` Or use a CDN ```html ``` ```html ```

HTML MARKUP

```html Open modal
<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>  
... ``` Bulma documentation on modal

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

```scss // Modal minimal setup $transition-duration: .3s; $transition-duration-newsPaper: .7s; $transition-duration-3dslit: .5s; $modal-perspective: 1300px; $modal-bg-color: rgba($black,.86); ```