Papermashup

Subscribe


Tweets


"RT @bethgordon: .@Tesco Please rethink archaic 'Approved by Mums'. Pretty sure it's not just mothers who make childcare decisions. https://…"

@ashleyford 5 days ago

"Is there ever a time that @DFS doesn't have a sale on?"

@ashleyford 1 week ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Papermashup

Periscope style heart effect with CSS and JS

Recreating the Periscope heart animation with CSS and JavaScript

AshleyAshley

If you’ve seen the Periscope app heart animation, you’ll know what I’m talking about. It’s the one where you tap on the screen and a flurry of hearts appear and fade out animated up the screen. If you’re building a iOS native app you can check out this code, which uses the react native playground.

hearts

The HTML

This is our container that we’ll use to inject the hearts into.



<div class="hearts"></div>

The CSS

We use font awesome to produce the heart icons, set random colours on them and animate them using CSS. FlowOne and FlowThree control the animation of the hearts up the page.



div.hearts {
width: 200px;
height: 600px;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -50px;
}
div.heart {
width: 30px;
height: 30px;
opacity: 1;
position: absolute;
bottom: 0;
display: none;
}
div.heart i {
position: absolute;
left: 0;
top: 0;
opacity: .9;
}
.colOne {
color: #fce473;
}
.colTwo {
color: #f68b39;
}
.colThree {
color: #ed6c63;
}
.colFour {
color: #847bb9;
}
.colFive {
color: #97cd76;
}
.colSix {
color: #35b1d1;
}
@keyframes flowOne {
0% {
opacity: 0;
bottom: 0;
left: 14%}
40% {
opacity: .8;
}
50% {
opacity: 1;
left: 0;
}
60% {
opacity: .2;
}
80% {
bottom: 80%}
100% {
opacity: 0;
bottom: 100%;
left: 18%}
[email protected] flowTwo {
0% {
opacity: 0;
bottom: 0;
left: 0;
}
40% {
opacity: .8;
}
50% {
opacity: 1;
left: 11%}
60% {
opacity: .2;
}
80% {
bottom: 60%}
100% {
opacity: 0;
bottom: 80%;
left: 0;
}
[email protected] flowThree {
0% {
opacity: 0;
bottom: 0;
left: 0;
}
40% {
opacity: .8;
}
50% {
opacity: 1;
left: 30%}
60% {
opacity: .2;
}
80% {
bottom: 70%}
100% {
opacity: 0;
bottom: 90%;
left: 0;
}
}

The JS

The JavaScript for this example is fairly simple. Every click we make on the body tag inserts a heart into the .hearts holding div with a random font size and colour, we also have a timeout function that fires and removes the heart div.



$("body").on("click", function() {
var b = Math.floor((Math.random() * 100) + 1);
var d = ["flowOne", "flowTwo", "flowThree"];
var a = ["colOne", "colTwo", "colThree", "colFour", "colFive", "colSix"];
var c = (Math.random() * (1.6 - 1.2) + 1.2).toFixed(1);
$('<div class="heart part-' + b + " " + a[Math.floor((Math.random() * 6))] + '" style="font-size:' + Math.floor(Math.random() * (50 - 22) + 22) + 'px;"><i class="fa fa-heart"></i></div>').appendTo(".hearts").css({
animation: "" + d[Math.floor((Math.random() * 3))] + " " + c + "s linear"
});
$(".part-" + b).show();
setTimeout(function() {
$(".part-" + b).remove()
}, c * 900)
});

Demo Download

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 0
There are currently no comments.