"bubble"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
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>
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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html,
body {
height: 100%;
}
body {
background: #09f;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwOTlmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1ZDFmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #0099ff), color-stop(100%, #45d1ff));
background-image: -moz-linear-gradient(bottom, #0099ff, #45d1ff);
background-image: -webkit-linear-gradient(bottom, #0099ff, #45d1ff);
background-image: linear-gradient(to top, #0099ff, #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;
}
.bubble-toggle:hover {
background: rgba(255, 255, 255, 0.75);
}
.bubbles {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
margin: 0 auto;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Material Kit PRO

Questions / Comments: