So I needed to replicate the Periscope heart animation, you know the one where you start going tap crazy all over a stream and those little pretty hearts show up? That one :)
I Googled far and wide and found a couple of tutorials but all were really over the top for something so simple! One of them used a CSS hack to restart the CSS animation and kept crashing chrome... So I needed something more browser friendly and not so experimental. This is what I came up with and I hope you find it easy to apply to your project!
List of ingredients:
- One HTML doc
- Some nifty jQuery code
- Some CSS3 animations
- FontAwesome's icon font
- Prefixfree.js for dealing with prefixes!
Let's start making!
The HTML is going to be pretty simple. This is all you need in the HTML file:
<!-- Start Content -->
<div class="particle-box"></div>
<!-- End Content -->Let's take a peek at the CSS
Again pretty straight forward, the particle-box div is the container for the particles (hearts, triangles, etc...). I used hearts from the FontAwesome icon set as it contains both a heart shape and the outlined version of it. Then I absolutely positioned both within a single particle div and overlayed the outlined one over the solid one using z-index. Ramp down the opacity on the solid shape and you get a pretty heart that is a bit faded but has a pretty outline.
div.particle {
width: 30px;
height: 30px;
opacity: 1;
position: absolute;
bottom: 0%;
display: none;
}
div.particle i {
position: absolute;
left: 0px;
top: 0px;
opacity: 0.3;
}
div.particle i.fa-heart-o {
z-index: 1;
opacity: 0.8;
}And now the kicker, make an animation that follows a curve from bottom to top and starts from a faded out element then fades in and fades out again at the end of the container height.
@keyframes flowOne {
0% {
opacity: 0;
bottom: 0%;
left: 14%;
}
40% {
opacity: 0.8;
}
50% {
opacity: 1;
left: 0%;
}
60% {
opacity: 0.2;
}
80% {
bottom: 80%;
}
100% {
opacity: 0;
bottom: 100%;
left: 18%;
}
}Repeat this animation three or more times and slightly change the parameters to make it more random! That's it for the CSS.
Let's tie it together using jQuery.
First of all for CSS keyframe animations to work you actually have to remove the element and re-add it in order for it to be redrawn. There are a couple of hacks that can make this work but some of them are pretty wild. So I did something simpler. Just remove the element after the animation completes and make a new one once it starts.
Let's look at the complete jQuery function and then we can hack it apart to see how it works:
$('body').on('click', function(){
// Init
var rand = Math.floor((Math.random()*100)+1);
var flows = ["flowOne", "flowTwo", "flowThree"];
var colors = ["colOne", "colTwo", "colThree", "colFour", "colFive", "colSix"];
var timing = (Math.random()*(1.3-1.0)+1.0).toFixed(1);
// Animate Particle
$('<div class="particle part-'+rand+' '+colors[Math.floor((Math.random()*6))]+'" style="font-size:'+Math.floor(Math.random()*(30-22)+22)+'px;"><i class="fa fa-heart-o"></i><i class="fa fa-heart"></i></div>').appendTo('.particle-box').css({animation: ""+flows[Math.floor((Math.random()*3))]+" "+timing+"s linear"});
$('.part-'+rand).show();
// Remove Particle
setTimeout(function(){
$('.part-'+rand).remove();
}, timing*1000-100);
});Init
var rand: is a random number attached to the particle div (example: particle-32).
var flows: this is an array of the animation variations we made in CSS.
var colors: CSS classes corresponding to different colors for the particles defined in our CSS file.
var timing: This is how we define a random animation duration for each particle. I found that between 1.0 and 1.3 seconds works best in my example...
Animate particle
Here we attach the random animation we came up with in init. We attach it to the randomly named particle div and add the div to the particle-box container. After creating the particle we use show() to show the particle on screen.
Remove Particle
We take the animation duration and remove 100ms from it then put that in a setTimeout to remove the particle after the animation is complete. The 100ms gap is just there to prevent it from glitching on the screen.
Way to go! We're done and you should have a pretty sweet animation going on.
All of the files are available for download here popup: yes, so you can open them up and start making it your own.
I'd love to hear any feedback you have :)