You can deploy this in three clicks:
- Click fork
- Click Settings
- Enable Github Pages on the "master" branch
Your site should be reachable at https://<Username>.github.io/html-css-only
We will be adding bodymovin animations to this simple portfolio site
- Fork the repo on Github
- Clone the repo so you can edit things locally
- Open up
index.htmlin a web browser, you can refresh that page to see changes you made locally
- go to lottiefiles.com and pick out an animation
- download it, and copy the
.jsonfile into theassetsfolder asmy-animation.json
- Get the bodymovin library on your webpage.
Edit index.html, insert this <script/> tag inside the <head> tag:
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.js"></script>for example:
...
<head><metacharset="UTF-8"><metaname="viewport" content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible" content="ie=edge"><linkrel="stylesheet" href="assets/css/main.css" /><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.js"></script><title>My site</title></head>
...This script automatically runs when the page loads. It fetches the bodymovin library from a CDN, and sets the global propery bodymovin.
Now if you open up the devtool in chrome, for example, you should see bodymovin as a variable:
- Now we can create an empty
<div/>element, for our animation, and give it anid="to-animate":
<divid="to-animate"/>for example, you can place it right on the front page!:
<headerid="header" class="alt"><divclass="inner"><divid="to-animate"/><h1>Hello World</h1><p>There's nothing here yet...</p></div></header>- Now add a
<script>tag just before the closing</body>tag.
We will initialize our animation here:
...
<script>// your code goes here</script></body>- Now we initialize the animation:
...
<script>// your code goes hereletanimation=bodymovin.loadAnimation({container: document.getElementById('to-animate'),renderer: 'svg',loop: true,autoplay: true,path: 'assets/my-animation.json'})</script></body>Here, we tell bodymovin to render as 'svg', to loop infinitely, and to autoplay when the page loads.
- Style your animation
You can use CSS to size and position your animation. Here I've inserted a <style> tag, right after the opening <body> tag:
<style>#to-animate {
max-width:10em;
display: inline-block;
}
</style>- Go forth and try out some more stuff