A jQuery powered example of how you can create a bubbling effect on a HTML heading. The bubbles appear as though they're coming from behind the text, and then fade out and are removed.
A Pen by html5andblog on CodePen.
A jQuery powered example of how you can create a bubbling effect on a HTML heading. The bubbles appear as though they're coming from behind the text, and then fade out and are removed.
A Pen by html5andblog on CodePen.
<div class="center-outer"> | |
<div class="center-inner"> | |
<div class="bubbles"> | |
<h1>Bubbling Header</h1> | |
</div> | |
</div> | |
</div> |
// Created for an Articles on: | |
// https://www.html5andbeyond.com/bubbling-text-effect-no-canvas-required/ | |
jQuery(document).ready(function($){ | |
// Define a blank array for the effect positions. This will be populated based on width of the title. | |
var bArray = []; | |
// Define a size array, this will be used to vary bubble sizes | |
var sArray = [4,6,8,10]; | |
// Push the header width values to bArray | |
for (var i = 0; i < $('.bubbles').width(); i++) { | |
bArray.push(i); | |
} | |
// Function to select random array element | |
// Used within the setInterval a few times | |
function randomValue(arr) { | |
return arr[Math.floor(Math.random() * arr.length)]; | |
} | |
// setInterval function used to create new bubble every 350 milliseconds | |
setInterval(function(){ | |
// Get a random size, defined as variable so it can be used for both width and height | |
var size = randomValue(sArray); | |
// New bubble appeneded to div with it's size and left position being set inline | |
// Left value is set through getting a random value from bArray | |
$('.bubbles').append('<div class="individual-bubble" style="left: ' + randomValue(bArray) + 'px; width: ' + size + 'px; height:' + size + 'px;"></div>'); | |
// Animate each bubble to the top (bottom 100%) and reduce opacity as it moves | |
// Callback function used to remove finsihed animations from the page | |
$('.individual-bubble').animate({ | |
'bottom': '100%', | |
'opacity' : '-=0.7' | |
}, 3000, function(){ | |
$(this).remove() | |
} | |
); | |
}, 350); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
/* Non essential CSS - Just for example centering */ | |
html, body { | |
width: 100%; | |
height: 100%; | |
margin: 0; | |
} | |
.center-outer { | |
display: table; | |
width: 100%; | |
height: 100%; | |
} | |
.center-inner { | |
display: table-cell; | |
vertical-align: middle; | |
text-align: center; | |
} | |
/* Essential CSS - Makes the effect work */ | |
body { | |
background-color: #3498db; | |
} | |
.bubbles { | |
display: inline-block; | |
font-family: arial; | |
position: relative; | |
} | |
.bubbles h1 { | |
position: relative; | |
margin: 1em 0 0; | |
font-family: 'Luckiest Guy', cursive; | |
color: #fff; | |
z-index: 2; | |
} | |
.individual-bubble { | |
position: absolute; | |
border-radius: 100%; | |
bottom: 10px; | |
background-color: #fff; | |
z-index: 1; | |
} |
<link href="//fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet" /> |