Website Opening Animation
Coded version of the concept from Alberto Conti.
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.
<head>
)
CSS (inside of your <link rel="stylesheet" type="text/css href="dist/main.css">
</body>
)
JS (before the closing <script type="text/javascript href="dist/main.js">
Option 2 (with development environment)
Requirements
- node >= 10.15.0
- Package manager
- npm (included in node)
- OR
- yarn
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 thedist/
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