Originally created in 2015 on valentines day (February 14, mark it in your calendar) for my girlfriend. Since this years Valentine’s day is around the corner I thought it would be nice to kick off this blog with the very same animation. I know, it’s not the quality posts I am planning on posting here. But for now, it will do. Since i don’t want to just recycle the code, i also make this a sort of tutorial.
The animation consists of 4 hearts, one that is stationary, and 3 that animate.
See the Pen Be my Valentine heart, beating with css3 animations by Skippy (@Skippy) on CodePen.dark
For anyone not familiair with codepen, it is a online playground for HTML, CSS and JavaScript. It has tons of options, and even supports Emmet and preprocessors such as Less, Sass/SCSS and more. You can edit my pens on codepen too! Just fork my pen and it will be saved to your account. Now you have a personal copy and can make changes, or break the code 😉
HTML
The HTML is not much, it has some containers that makes positioning the heart easier. There are some elements i want to point out. While the HTML in itself is not that exciting the placement of the elements is a key part of the animation.
Icons and click me
As you can see, i have used a span element with the class “ico”. Inside of it there is another icon, I have named this ico2. These 2 spans, are the hearts you see popping out. There are more than just 2 hearts on screen, that is where the pseudo elements come in to play. I’ll explain more on that in the css section.
<span class="ico"> <span class="ico2"></span> <span class="title">Click Me</span> </span>
The hidden part
This part is hidden, unless the user clicked the heart. It will be animated via css, more on this later on.
<div class="endtext"> <span class="close" title="Restart"><i class="fa fa-times"></i></span> <h1>I love you baby</h1> <h2>Be my valentine?</h2> <h3>~Skippy</h3> </div>
css
This is where all the magic happens, I’ll take snippets of the css and go through them one by one. You can view the complete code on codepen.
Fonts
The whole animations would have been a lot less exciting without a good font. I have chosen for a playful swirly style of Pacifico. It is available for free on Google Fonts, I’ll make a separate post about that later.
@import url(http://fonts.googleapis.com/css?family=Pacifico);
Backgrounds, subtle patterns and bright colors
I wanted the page to be bright, but the heart had to pop out, other than the animation of course :). But I didn’t wanted the page to be a plain color. So i searched for a pattern that was not to busy and subtle enough that it wouldn’t draw attention. I found a noisy one on Subtle Patterns. The class “bgoverlay” is a absolute positioned div that overlays the whole page, the background color is set to a bright purple, but i have lowered the alpha channel to 70%. This makes the pattern even more subtle and this way I can colorize it without re-hosting the image.
body{
background: url(http://subtlepatterns.com/patterns/noise_lines.png);
font-family: 'Pacifico', cursive;
overflow: hidden;
color: #fff;
}
.bgoverlay{
background: rgb(103,58,183);
background: rgba(103,58,183,0.7);
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
}
The Trick
Now, how do we know that the user has clicked? JavaScript! I know we can do this without JavaScript or even the bloated library of jQuery to do this. But why spend a lot of time on something fun that has no real use case outside to aw your girl. In the section titles JavaScript i’ll explain more on the code to do this but for now we focus on the css.
As you can see, I have 1 element. The class “ico” is defined twice, but once the class “open” is prepended. This is the toggle class that JavaScript has set for us, it will let the css know when to load the next part of the animation. In this case, it opens the heart. The class “open” has been set to a parent element.
I will not go through all the css and animations, it’s kind of straight forward but I will point out some little details that will make your life easier.
.ico{
display: block;
width: 320px;
height: 320px;
}
.open .ico{
animation: open 4s;
transform: scale(10);
}
2 animations defined, 3 variations
Here we have the pseudo elements, it’s a simple trick to have less HTML markup in your scripts. They have some limitations, so be careful when using them. Here I hooked up the animations, they are defined elsewhere in the css file. In the css, I have left some comments to make it clear what lines I am talking about and what they mean. Note: this is not how you set up the pseudo elements. Look in the css where they are first defined. Just make sure to have a “content: ‘ ‘;” attribute. Otherwise they won’t show up.
I have 2 hearts that use the same animation, but I have used a different duration value. This creates an alternating effect. The first ico declared, uses a different animation that explodes the heart much larger and runs for 4 seconds.
.ico:after{
animation: explode 4s infinite;
}
.ico2:before{
animation: explodeSmall 3s infinite; /*Use the animation labeled explodeSmall, run it forever and the duration of the animation is 3 seconds*/
}
.ico2:after{
animation: explodeSmall 2s infinite;/*Use the animation labeled explodeSmall, run it forever and the duration of the animation is 2 seconds.*/
}
Defining animations in css
In the previous part we referenced some css animations, but we have to actually define them in the css to make them work. The great thing about codepen is that you can set a auto prefixer. On codepen you can click on the “view compiled css” button. Shown here:
The animations are nearly the same, they just have different values. In the css animations you can use a simple “from” and “to” to have a beginning and an end. If you need more steps, you can use percentages. Start at 0 and make as many steps as needed until you reach 100%.
The transform function uses the scale modifier, it starts at scale set to 1. This is the starting position and initial scale of the heart. We scale it up by 60%, this is done by using the value 1.6. Since 1 is it’s starting position, it gets a scaling of 0.6. We also fade the exploding heart out, this is done by lowering the opacity value to 0.
@keyframes explode {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.6);
opacity: 0;
}
}
@keyframes explodeSmall {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.2);
opacity: 0;
}
}
The hidden part (css)
As promised, the snippet of the hidden text. Do you see the value for “top”? It’s hidden out of view, also the opacity is set to 0.
The silly part is, this is not even the best way to do this. But to stay true to the original concept I will explain why I did this. And why you shouldn’t do this.
First I declare the endtext class. I set the position and such, this is all good.
Next, I declare the open state, the state the page is in when the user has clicked on the heart and the JavaScript has fired off. Here is where it all goes wrong, i set the opacity and the top value. But i also set an animation.
.endtext{
opacity:0;
position: absolute;
top:-100px;
width:100%;
}
.open .endtext{
top:0;
opacity: 1;
animation: show 5s;
}
In the animation, I essentially do the same thing over again. I set the top value, and the opacity. The starting point is how i declared it in the class, and the ending point is how I set the other class when the heart would open. This is redundant and unnecessary.
@keyframes show {
from {
opacity: 0;
top: -100px;
}
to {
opacity: 1;
top:0;
}
}
It would have been easier to do this, but this was made years ago and I was just getting the hang of animation outside of jQuery.
Here i use an transition with the selector set to all and with a duration of 5s.
.endtext{
opacity:0;
position: absolute;
top:-100px;
width:100%;
transition: all 5s ease;
}
.open .endtext{
top:0;
opacity: 1;
}
JavaScript (jquery)
This part we can go through real quick. What it loosely says, if the page is loaded, and the user clicked on the element with the class “title”. I will add a class called “open” the the element with the class “container”.
The same goes for close, but it just removes the class.
$(document).ready(function(){
$('.title').click(function(){
$('.container').addClass('open');
});
$('.close').click(function(){
$('.container').removeClass('open');
});
});
0 Comments