Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/postare/bulma-modal-fx
A set of modal window effects with CSS transitions and animations for Bulma.
https://github.com/postare/bulma-modal-fx
bulma css css-transitions
Last synced: about 21 hours ago
JSON representation
A set of modal window effects with CSS transitions and animations for Bulma.
- Host: GitHub
- URL: https://github.com/postare/bulma-modal-fx
- Owner: postare
- License: mit
- Created: 2018-03-24T16:57:22.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-03T03:34:38.000Z (about 2 years ago)
- Last Synced: 2024-12-16T16:26:24.062Z (8 days ago)
- Topics: bulma, css, css-transitions
- Language: HTML
- Homepage: https://postare.github.io/bulma-modal-fx/
- Size: 1.57 MB
- Stars: 130
- Watchers: 6
- Forks: 20
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
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
[...]
```
[Bulma documentation on modal](https://bulma.io/documentation/components/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);
```