I / O fading on resize
I have the following: http://jsfiddle.net/JfGVE/318/
The problem is that this is not a smooth animation. How I wanted this to work:
- Center the icon to the middle of the screen before displaying it.
- Fade it out, and while it fades out, resize it to something slightly larger while staying at the dead center of the screen.
- Fade out.
How can I fix the animation to be completely smooth and feel as if it is "momentum".
HTML:
<a href="#">Click Me!</a>
<i class="fa fa-heart"></i>
CSS
.fa-heart {
font-size: 48px;
color: red;
position: absolute;
display: none;
}
JQuery
$(document).on("click", "a", function() {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
/* Set the icon to the center of the screen. */
$('.fa-heart').css({ 'left': center_width, 'top': center_height });
/* Fade the icon in, resize it, and fade it out. */
$('.fa-heart').fadeIn();
$('.fa-heart').animate({ fontSize: '60px' }, 300);
$('.fa-heart').fadeOut();
});
Check it out: http://jsfiddle.net/JfGVE/336/
$(document).on("click", "a", function() {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
/* Set the icon to the center of the screen. */
$('.fa-heart').css({ 'left' : center_width - 24, 'top': center_height - 24 });
/* Fade the icon in, resize it, and fade it out. */
$('.fa-heart').animate({ fontSize: '60px', opacity: 1, 'left' : center_width - 30, 'top': center_height - 30}, 250);
$('.fa-heart').animate({ fontSize: '48px', opacity: 0, 'left' : center_width - 24, 'top': center_height - 24}, 250);
});
Instead of using fadeIn () and fadeOut (), I used animation () to change size and opacity at the same time. You can change the timing so they look like a real heart rate, but since the resize and opacity are in the same animation (), they will happen at the same time. The third value in animation () is to set the center of the image to the center of the page. This should be center_height (or center_width) - 1/2 the height of the image so that the center of the image is aligned with the center of the screen. You need an offset because in normal CSS the position tag aligns your image to the specified value relative to the top left corner (0, 0 of the image). The animation time can be changed depending on how fast / slow you want the heart to "beat".
source to share
You can animate CSS properties instead of using fadeIn()
and fadeOut()
. And to center the heart, you need:
(width/height) of the window (width/height) of the heart
---------------------------- - ---------------------------
2 2
Demo on Fiddle
JQuery
$(document).on("click", "a", function() {
var w = ($(window).width() / 2) - ($('i').width() / 2);
var h = ($(window).height() / 2) - ($('i').width() / 2);
$('.fa-heart').css({ 'left': w, 'top': h });
$('.fa-heart').animate({ fontSize: '48px', opacity: '0'}, 100);
$('.fa-heart').animate({ fontSize: '60px', opacity: '1'}, 700);
$('.fa-heart').animate({ fontSize: '48px', opacity: '0'}, 500);
});
CSS
.fa-heart {
font-size: 48px;
color: red;
position: absolute;
opacity: 0;
}
source to share
You can achieve smoother and (controversial) faster animations using Julian Shapiro's velocity.js plugin
just fine-tune your css giving opacity: 0
instead of display: none
your element
.fa-heart {
font-size: 48px;
color: red;
position: absolute;
/* display: none; */
opacity: 0;
}
then the speed parameter loop
will give you the effect you want
jQuery(document).ready(function ($) {
$("body").on("click", ".click", function () {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
$('.fa-heart').css({
left: center_width,
top: center_height
}).velocity({
opacity: 1,
fontSize: "60px"
}, {
loop: true, // animate from initial values back and forth
duration: 400 // adjust as needed
});
});
});
... this way you don't need fadeIn
either fadeOut
, or animate the original values or whole multiple methodsanimate()
See JSFIDDLE
Note that you can set how many times you want the animation to run by setting a number in the option loop
, for example
loop: 1 // or twice, three times, etc (true does infinite loop)
http://jsfiddle.net/nao9k1Lx/1/
Also note that I have given a class to the click
tag <a>
to be more specific.
source to share
I updated your JsFiddle , tell me if this is what you need, I can explain the differences.
Html
<a href="#">Click Me!</a>
<div class="anim-container">
<i class="fa fa-heart"></i>
</div>
Javascript
$(document).on("click", "a", function() {
var center_width = $(window).width() / 2;
var center_height = $(window).height() / 2;
/* Set the icon to the center of the screen. */
/* Fade the icon in, resize it, and fade it out. */
$('.fa-heart').fadeIn();
$('.fa-heart').animate({ fontSize: '55px' }, {duration: 300, queue: false});
$('.fa-heart').animate({ fontSize: '48px' }, 300);
$('.fa-heart').fadeOut();
});
source to share