Skip to content

Instantly share code, notes, and snippets.

@jamesknelson

jamesknelson/BlackTriangle.js

Last active April 8, 2019 19:00
Show Gist options
  • Save jamesknelson/9b7db05268e747b4aa4d to your computer and use it in GitHub Desktop.
Save jamesknelson/9b7db05268e747b4aa4d to your computer and use it in GitHub Desktop.
Download ZIP
A black triangle. It spins if ES6 works, otherwise it doesn't.
Raw
BlackTriangle.js
export default class BlackTriangle {
constructor(selector) {
this.angle = 0;
this.innerEl = document.querySelector(selector).querySelector('.BlackTriangle-inner');
}
rotate(amount) {
this.angle = (this.angle + amount) % 360;
}
render() {
this.innerEl.style.transform = `rotate(${this.angle}deg)`;
}
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack Black Triangle</title>
</head>
<body>
<style>
html, body {
height: 100%;
min-height: 100%;
margin: 0;
}
.BlackTriangle {
position: absolute;
height: 100%;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
}
.BlackTriangle-inner {
position: absolute;
top: 50%;
left: 50%;
width: 277.2px;
height: 277.2px;
margin-top: -138.6px;
margin-left: -138.6px;
border-radius: 100%;
}
.BlackTriangle-inner:before {
position:absolute;
z-index: 1;
top: 50%;
left: 50%;
margin-top: -136px;
margin-left: -120px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 120px 207.8px 120px;
border-color: transparent transparent #000 transparent;
}
</style>
<div id="triangle" class="BlackTriangle">
<div class="BlackTriangle-inner"></div>
</div>
<script src="main.js"></script>
</body>
</html>
Raw
main.js
'use strict';
import BlackTriangle from "./BlackTriangle";
const triangle = new BlackTriangle('#triangle');
window.setInterval(
() => {
triangle.rotate(1);
triangle.render();
},
20
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment