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.
Created
December 28, 2014 02:17
-
-
Save anonymous/b2b8e3c106756157458b to your computer and use it in GitHub Desktop.
Animated Bubbles
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
| <!-- | |
| 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> |
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
| 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(); |
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
| @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; | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment