I attempted to replicate the slider effect seen on this website:
Below is the animation code:
$('.tagLink').click(function () {
$('html').css('overflow', 'hidden');
$('#tagBoxOverlay').show().stop(1).fadeTo(200, .9)
$('#tagBox').show().stop(1).animate({
marginTop: '-37.5%',
marginLeft: '-37.5%',
height: '75%',
width: '75%',
opacity: 1
}, {
duration: 200,
specialEasing: {
opacity: 'linear',
width: 'linear',
height: 'linear',
marginLeft: 'linear',
marginTop: 'linear'
},
complete: function () {
$(tagBoxContents).fadeTo(200, 1);
$('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1);
$(window).resize(function () {
$('#tagBoxPopularWrapper').height($('#tagBox').height() - $('#tagBoxDescription').height() - 1)
});
}
});
tagBoxOverflow and tagBox initially have 100% width & height. The overlay fades in, and the box both fades in and reduces in size.
You can view this effect in action on this website: Click "begin," then click "hipsters," and the animation will occur.
Why is the animation so slow? Here's the direct link to the JS file:
I am confused and struggling to figure this out. I am aware that this might be demanding on the browser, but Metalabs seems to handle it smoothly! Could it be better if I used CSS animations with JS as a backup?