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:
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin.js"></script>for example:
...
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="assets/css/main.css" />
<script src="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":
<div id="to-animate"/>for example, you can place it right on the front page!:
<header id="header" class="alt">
<div class="inner">
<div id="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 here
let animation = 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