Skip to content

README.md

Latest commit

 

History

History
91 lines (68 loc) · 3.02 KB

README.md

File metadata and controls

91 lines (68 loc) · 3.02 KB

Website Opening Animation

Coded version of the concept from Alberto Conti.

License node webpack babel

See the demo here: Demo

Usage

You can use the generated minified files OR your can setup the development environment and build things on your own.

Option 1 (without development environment)

Open the index.html inside the dist folder OR include the CSS & JavaScript files into your website.

CSS (inside of your <head>)

<link rel="stylesheet" type="text/css href="dist/main.css">

JS (before the closing </body>)

<script type="text/javascript href="dist/main.js">

Option 2 (with development environment)

Requirements

1. Install dependencies

...with Yarn
$ yarn
...with npm
$ npm install

2. Run development server

While your are in the developement mode the dist/ folder and files won't be created. All files are cached and loaded automatically by the webpack dev server.

...with yarn
$ yarn dev
...with npm
$ npm run dev

The development server watches for your changes and reloads the browser automatically. You can open it by visitting http://localhost:8000/

3. Make changes to the code

Happy coding!

4. Build minified files

This creates the "real" & minified files. The dist/ folder will be automatically removed and then created to start with a clean folder.

...with yarn
$ yarn build
...with npm
$ npm run build

Folders & Files

All of the source files are in the src/ folder. The generated files are in the dist/ folder.

src/index.html

The entry and template of the website. The generated index.html inside the dist/ folder has the main.css and main.js included.

src/js/

Holds all JavaScript files which will be compiled into the dist/main.js file.

src/scss/

Holds all SCSS files which will be compiled into the dist/main.css file.

src/fonts/

Holds all fonts which will be compiled and included. The folder name is the Kebab Case name of the font (e.g. open-sans or my-awesome-font. Your can include the .scss files inside the folders in the src/scss/_fonts.scss file.

src/assets/

Your can find all images, videos or other assets there.

License

This project is licensed under the MIT License - see the LICENSE file for details