Last active
August 29, 2015 14:25
-
-
Save shduff/73b8526f1ad6276eb6fe to your computer and use it in GitHub Desktop.
ways to use ball objects
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <style> | |
| #container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .ball { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: calc(50px/2); | |
| position: absolute; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='container'></div> | |
| <script> | |
| var Ball = function(radius, text, x, y) { | |
| var instance = this; // grab a pointer to 'this' | |
| this.radius = radius; // save our radius | |
| this.html = document.createElement('div'); // create the HTML we'll use | |
| this.html.innerHTML = text; | |
| this.html.classList.add('ball'); // add a class to connect to our CSS | |
| var styling = { // Define a dictionary for the various CSS attributes we want to style | |
| width: 2*this.radius + 'px', | |
| height: 2*this.radius + 'px', | |
| borderRadius: this.radius + 'px', | |
| left: x + '%', | |
| top: y + '%', | |
| backgroundColor: 'rgba(' + [parseInt(Math.random() * 255), parseInt(Math.random() * 255), parseInt(Math.random() * 255), .8].join(',') + ')' | |
| }; | |
| Object.keys(styling).forEach(function(key) { // iterate over them and set them | |
| instance.html.style[key] = styling[key]; | |
| }); | |
| document.getElementById('container').appendChild(instance.html); // add ourselves to the HTML | |
| this.html.addEventListener('click', function(event) { | |
| // Add some functionality so that when we click on it we turn off our loop | |
| clearInterval(instance.animateLoop); | |
| }); | |
| } | |
| window.addEventListener('load', function(event) { // When the page loads | |
| // Make 1 balls; | |
| new Ball(100, '', '40%', '40%'); | |
| //uncomment lines to see some idea-related balls | |
| // var ideas = { | |
| // 'syntonicity':57, | |
| // 'deschooling':66, | |
| // 'kindness':89, | |
| // 'freedom':13, | |
| // 'imagination':44, | |
| // 'beauty':100, | |
| // }; | |
| // for (var i in ideas) { | |
| // new Ball(ideas[i]*2,i,Math.random()*100,Math.random()*100); | |
| // } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment