Text Effects CSS | Text Animation css | Bubble Text Effect With CSS3
generating preview
<html>
<head>
<style>
/* 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;
}
body {
background-color: #025186;
}
.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;
}
</style>
</head>
<body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<div class="center-outer">
<div class="center-inner">
<div class="bubbles"> <h1> Designer Desk Online </h1> </div>
</div>
</div>
<script>
// 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>
</body>
</html>
How to Use this Elements / Source Code :
You Can Use Bubble Text Effect With CSS3 elements by select the above source code (CTRL + A) then copy the code (CTRL + C) and paste (CTRL + V) it in a blank html Page to initially test it. Then you can use the Above Bubble Text Effect With CSS3 where ever you want for your project.
Usage of Bubble Text Effect With CSS3 :
You Can Use this Bubble Text Effect With CSS3 in your entertainment website or blogs. We want to look attractive the Title text or heading text that's why we need this bubble text effect here. Underwater text effect or the the laundry or washing website it can be used this kind of effect. Bubble text effect is an amazing text effect created using HTML and css3