Саму разметку писать не будет она очень большая c svg, перейдем пожалуй сразу к js:
Смотрим результат:
JavaScript:
$(document).ready(function() {
setTimeout(function(){
$(".card__title").removeClass('is-animated');
}, 2000);
$('.js-trigger').on('click', function() {
//hide body overflow
$('body').addClass('hide-overflow');
//hide card
$('.card').addClass('is-gone');
//reset shake animate and button
$('#overlay-modal').removeClass('animate-shake');
$(".js-trigger--shake").show();
//add class to open modal
$('#overlay-modal').toggleClass('is-open');
$('#overlay-background').addClass('overlay-background is-open');
});
//variable to set animate class type
var setAnimationClass = function(type) {
$('#overlay-modal').removeClass().addClass('is-animated' + ' ' + type);
};
//add value as class to modal
$('.js-animated').change(function() {
var animatedModal = $(this).val();
setAnimationClass(animatedModal);
});
//add class on load to modal
//$('.modal-box').addClass();
//add animate shake to modal after it's open
$('.js-trigger--shake').on('click', function() {
$('#overlay-modal').removeClass().addClass('is-animated animate-shake is-open');
$(".js-trigger--shake").hide();
$('.svg-fixed').addClass('is-clean');
});
//add animate zoomOut to modal before it's close
$('.js-trigger--close').on('click', function() {
//remove hide body overflow
$('body').removeClass('hide-overflow');
//show card
$('.card').toggleClass('is-gone');
$('#overlay-modal').removeClass().addClass('is-animated animate-zoomOut is-open');
$('#overlay-background').removeClass().addClass('is-animated animate-opacityReverse is-open');
$('.svg-fixed').removeClass('is-clean');
setTimeout(function(){
$("#overlay-modal").removeClass('animate-zoomOut is-open');
$("#overlay-background").removeClass('animate-opacityReverse is-open');
var animatedModal = $('.js-animated').val();
setAnimationClass(animatedModal);
}, 100);
});
//add animate shake to modal after is open
$('.js-hand-note').on('mouseenter', function() {
$('.hand-note').addClass('is-animated');
$(this).removeClass('is-animated');
});
$('.js-hand-note').on('mouseleave', function() {
$('.hand-note').removeClass('is-animated');
});
});