Skip to content

Instantly share code, notes, and snippets.

@aaronmw
Last active November 30, 2017 17:40
Show Gist options
  • Save aaronmw/82002e2e6480c87c4014504b7826d7d1 to your computer and use it in GitHub Desktop.
Save aaronmw/82002e2e6480c87c4014504b7826d7d1 to your computer and use it in GitHub Desktop.
Bubbles!
import Ember from 'ember';
export default Ember.Component.extend({
numBubbles: 10,
colors: ['red', 'green', 'yellow', 'blue'],
sizes: ['small', 'medium', 'large'],
classNames: ['banner'],
getRandomIntBetween(min, max) {
return Math.floor(this.getRandomBetween(min, max));
},
getRandomBetween(min, max) {
return Math.random() * (max - min + 1) + min;
},
roundTo(number, precision) {
var factor = Math.pow(10, precision);
var tempNumber = number * factor;
var roundedTempNumber = Math.round(tempNumber);
return roundedTempNumber / factor;
},
moveRandomly($bubble) {
let randomX = this.getRandomIntBetween(-100, 800);
let randomY = this.getRandomIntBetween(-100, 400);
let randomDuration = this.getRandomIntBetween(3, 10);
$bubble.css({
'transitionDuration': `${randomDuration}s`,
'left': `${randomX}px`,
'top': `${randomY}px`
});
// Move again when yer done
setTimeout(this.moveRandomly.bind(this, $bubble), randomDuration * 1000);
},
didInsertElement() {
let $el = this.$();
for (var i = 0; i < this.get('numBubbles'); i++) {
let $bubble = $('<div>');
let colors = this.get('colors');
let sizes = this.get('sizes');
let randomColor = colors[this.getRandomIntBetween(0, colors.length)];
let randomSize = sizes[this.getRandomIntBetween(0, sizes.length - 1)];
$bubble.addClass('backgroundColor--' + randomColor);
$bubble.addClass('bubble--size--' + randomSize);
$bubble.addClass('bubble');
$el.prepend($bubble);
this.moveRandomly($bubble);
}
},
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.backgroundColor--red {
background: #FA405C;
}
.backgroundColor--green {
background: #85C525;
}
.backgroundColor--blue {
background: #062942;
}
.backgroundColor--yellow {
background: #EDC02B;
}
.banner {
border-radius: 5px;
overflow: hidden;
background: #0d83dd;
padding: 100px;
color: white;
position: relative;
-webkit-transform: translate3d(0, 0, 0);
}
.bubble {
border-radius: 1000px;
position: absolute;
transition-property: top, left;
transition-duration: 3s;
transition-timing-function: ease-in-out;
z-index: -1;
}
:root {
--bubble--size--small: 50px;
--bubble--blur--small: 50px;
--bubble--opacity--small: 0.5;
--bubble--size--medium: 100px;
--bubble--blur--medium: 25px;
--bubble--opacity--medium: 0.75;
--bubble--size--large: 150px;
--bubble--blur--large: 5px;
--bubble--opacity--large: 1;
}
.bubble--size--small {
width: var(--bubble--size--small);
height: var(--bubble--size--small);
//filter: blur(var(--bubble--blur--small));
opacity: var(--bubble--opacity--small);
}
.bubble--size--medium {
width: var(--bubble--size--medium);
height: var(--bubble--size--medium);
//filter: blur(var(--bubble--blur--medium));
opacity: var(--bubble--opacity--medium);
}
.bubble--size--large {
width: var(--bubble--size--large);
height: var(--bubble--size--large);
//filter: blur(var(--bubble--blur--large));
opacity: var(--bubble--opacity--large);
}
{{#bubble-banner}}
FreshBooks Library Thing
{{/bubble-banner}}
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment