https://github.com/exslym/modal-popup-animation-css-js
Popup fadeIn-fadeOut Animation (CSS & JS, no jQuery)
https://github.com/exslym/modal-popup-animation-css-js
gh-pages github-pages modals-pop popup-window showmodal vanilla-javascript
Last synced: 2 months ago
JSON representation
Popup fadeIn-fadeOut Animation (CSS & JS, no jQuery)
- Host: GitHub
- URL: https://github.com/exslym/modal-popup-animation-css-js
- Owner: exslym
- Created: 2022-04-17T13:27:12.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-13T16:38:38.000Z (over 2 years ago)
- Last Synced: 2025-07-03T22:06:23.957Z (3 months ago)
- Topics: gh-pages, github-pages, modals-pop, popup-window, showmodal, vanilla-javascript
- Language: SCSS
- Homepage: https://exslym.github.io/Modal-Popup-Animation-CSS-JS/
- Size: 1.44 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### Installation
```
npm install
```
### Start Dev Server
```
npm start
```
### Build Prod Version
```
npm run build
```
### Deployment on GitHub Pages (Optional)
```
npm run deploy
```
This adds gh-pages branch to your project github repository, deploys built project there, hosts the site via GitHub Pages.
### Features:
- `ES6` Support **via babel (v7)**
- `SASS` Support via **sass-loader**
- `Linting` via **eslint** & **@babel/eslint-parser**
- `Formatter` via **prettier**
- `Autoprefix` via **postcss-preset-env**
- `Image Optimization` via **image-minimizer-webpack-plugin** & **svgo**
### When you run `npm run build`:
- The css file moves to a separate bundle file and gets it included in the head of the `index.html`
via [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin).
- All image files (svg, png, jpg/jpeg, webp) gets compressed with lossless quality
via [image-minimizer-webpack-plugin](https://github.com/webpack-contrib/image-minimizer-webpack-plugin).
Place all external connected files (jQuery and others) in ./tools and provide them path in html file.