Animated Bubbles

Animated-Bubbles.markdown

Animated Bubbles

Random bubbles animated with CSS Keyframes, and generated/randomised using jQuery.

It's a massive CPU drain, but quite fun!

A Pen by Ben Hodgson on CodePen.

License.

index.html

<!--
This is a *MASSIVE* CPU drain and just a bit of fun.
I wouldn't use it on anything serious, but see it in action here: http://beeroclock.in
-->

<div class="bubbles"></div>
<a class="bubble-toggle" href="#">Bubbles Off</a>

script.js

var $bubbles = $('.bubbles');

function bubbles() {
  
  // Settings
  var min_bubble_count = 20, // Minimum number of bubbles
      max_bubble_count = 60, // Maximum number of bubbles
      min_bubble_size = 3, // Smallest possible bubble diameter (px)
      max_bubble_size = 12; // Maximum bubble blur amount (px)
  
  // Calculate a random number of bubbles based on our min/max
  var bubbleCount = min_bubble_count + Math.floor(Math.random() * (max_bubble_count + 1));
  
  // Create the bubbles
  for (var i = 0; i < bubbleCount; i++) {
    $bubbles.append('<div class="bubble-container"><div class="bubble"></div></div>');
  }
  
  // Now randomise the various bubble elements
  $bubbles.find('.bubble-container').each(function(){
    
    // Randomise the bubble positions (0 - 100%)
    var pos_rand = Math.floor(Math.random() * 101);
    
    // Randomise their size
    var size_rand = min_bubble_size + Math.floor(Math.random() * (max_bubble_size + 1));
    
    // Randomise the time they start rising (0-15s)
    var delay_rand = Math.floor(Math.random() * 16);
    
    // Randomise their speed (3-8s)
    var speed_rand = 3 + Math.floor(Math.random() * 9);
    
    // Random blur
    var blur_rand = Math.floor(Math.random() * 3);
    
    // Cache the this selector
    var $this = $(this);
    
    // Apply the new styles
    $this.css({
      'left' : pos_rand + '%',
      
      '-webkit-animation-duration' : speed_rand + 's',
      '-moz-animation-duration' : speed_rand + 's',
      '-ms-animation-duration' : speed_rand + 's',
      'animation-duration' : speed_rand + 's',
      
      '-webkit-animation-delay' : delay_rand + 's',
      '-moz-animation-delay' : delay_rand + 's',
      '-ms-animation-delay' : delay_rand + 's',
      'animation-delay' : delay_rand + 's',
      
      '-webkit-filter' : 'blur(' + blur_rand  + 'px)',
      '-moz-filter' : 'blur(' + blur_rand  + 'px)',
      '-ms-filter' : 'blur(' + blur_rand  + 'px)',
      'filter' : 'blur(' + blur_rand  + 'px)',
    });
    
    $this.children('.bubble').css({
      'width' : size_rand + 'px',
      'height' : size_rand + 'px'
    });
    
  });
}

// In case users value their laptop battery life
// Allow them to turn the bubbles off
$('.bubble-toggle').click(function(){
  if($bubbles.is(':empty')) {
    bubbles();
    $bubbles.show();
    $(this).text('Bubbles Off');
  } else {
    $bubbles.fadeOut(function(){
      $(this).empty();
    });
    $(this).text('Bubbles On');
  }
  
  return false;
});

bubbles();

style.scss

@import "compass/css3";
// Sass Mixins

// Animation Mixin

@mixin animate($animation, $duration, $repeat, $easing) {
	-webkit-animation: $animation $duration $repeat $easing;
	   -moz-animation: $animation $duration $repeat $easing;
	    -ms-animation: $animation $duration $repeat $easing;
	        animation: $animation $duration $repeat $easing;
}


// Keyframes Mixin
// https://gist.github.com/ericam/1607696

@mixin keyframes($name) {
	@-webkit-keyframes #{$name} {
		@content; 
	}
	@-moz-keyframes #{$name} {
		@content;
	}
	@-ms-keyframes #{$name} {
		@content;
	}
	@keyframes #{$name} {
		@content;
	} 
}


// Main Styles

html,
body {
  height: 100%;
}

body {
  background: #09f;
  
  @include background-image(linear-gradient(bottom, #09f, #45d1ff));
}

.bubble-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.5);
  font-family: sans-serif;
  font-size: 13px;
  color: #333;
  
  &:hover {
    background: rgba(255,255,255,0.75);
  }
}


// Bubble Styles

.bubbles {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.bubble-container {  
	position: absolute;
	bottom: 0;
  
  @include animate(bubblerise, 4s, infinite, ease-in);
  @include opacity(0);
}

.bubble {  
	width: 6px;
	height: 6px;
	margin: 0 auto;
	border: 1px solid rgba(255,255,255,0.5);
	background: rgba(255,255,255,0.25);
  
  @include border-radius(10px);
  @include animate(bubblewobble, 0.4s, infinite, linear);
}


// Keyframe Animations

@include keyframes(bubblerise) {
	0% {    
		bottom: 0;
    
    @include opacity(0);
	}
	5% {    
		bottom: 0;
    
    @include opacity(1);
	}
	99% {
		@include opacity(1);
	}
	100% {    
		bottom: 100%;
    
    @include opacity(0);
	}
}


@include keyframes(bubblewobble) {
	0% {
		margin-left: 0;
	}
	50% {
		margin-left: 2px;
	}
}