Как сделать сценарий jQuery и CSS -отзывчивый? ⇐ Jquery

[Anonymous]

Вот мой сценарий jQuery, который анимирует страницу перехода.

Код: Выделить всё

Full Page Transition
[url=#]&#8592 Back to the ARTICLE[/url]
[url=#]&#8592 Back to the ARTICLE[/url]
 &#8592 GO BACK

css

Код: Выделить всё

/* GENERAL STYLES
-------------------------------------------------*/

body {
width: 100%;
}

h1 {
font-family: 'Raleway';
font-weight: bold;
text-align: center;
font-size: 50px;
color: #fff;
margin-top: 120px;
}

/* PAGES
-------------------------------------------------*/

#main-page {
height: 25px;
width: 375px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
background-color: #27ae60;
display: none;
}

#next-page {
height: 25px;
width: 375px;
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
margin: auto;
background-color: #e74c3c;
display: none;
}

.maincontent, .nextcontent {
padding-top: 40px;
display: none;
}

a.back{
font-family: 'Lato';
font-size: 20px;
color: #dfdfdf;
text-decoration: none;
text-align: center;
width: 20%;
margin: 25px auto 30px auto;
display: block;
}

a.mainlink, a.nextlink {
font-family: 'Lato';
color: #fff;
border: 3px solid #fff;
padding: 15px 10px;
display: block;
text-align: center;
margin: 25px auto;
width: 13%;
text-decoration: none;
cursor: pointer;
font-size: 20px;
font-weight: 500;

}

a.mainlink:hover, a.nextlink:hover{
background: #fff;
color: #575757;
}

javascript/jquery

Код: Выделить всё

$(document).ready(function() {

$.fn.animateRotate = function(angle, duration, easing, complete) {
var args = $.speed(duration, easing, complete);
var step = args.step;
return this.each(function(i, e) {
args.complete = $.proxy(args.complete, e);
args.step = function(now) {
$.style(e, 'transform', 'rotate(' + now + 'deg)');
if (step) return step.apply(e, arguments);
};

$({deg: 0}).animate({deg: angle}, args);
});
};

$("#main-page").css("background-color", "#e74c3c");
$("#main-page").css("height", "100vh");
$("#main-page").css("width", "100%");
$("#main-page").fadeIn();
$(".maincontent").fadeIn();

$(".mainlink").on("click", function() {
$(".maincontent").fadeOut();
$("#main-page").animate({
width: "25px",
height: "375px"
}, function() {
$(this).animateRotate(90);
});

setTimeout(function() {
$("#main-page").fadeOut();
}, 1500);

setTimeout(function() {
$("#next-page").animateRotate(0, 0);
$("#next-page").css("height", "25px");
$("#next-page").css("width", "375px");
$("#next-page").fadeIn();
$("#next-page").animate({
backgroundColor: "#27ae60"
}, function() {
$(this).animate({
height: "100vh"
}, function() {
$(this).animate({
width: $("body").width()
}, function() {
$(".nextcontent").fadeIn(300);
});
});
});
}, 800);
});

$(".nextlink").on("click", function() {
$(".nextcontent").fadeOut();
$("#next-page").animate({
width: "25px",
height: "375px"
}, function() {
$(this).animateRotate(-90);
});

setTimeout(function() {
$("#next-page").fadeOut();
}, 1500);

setTimeout(function() {
$("#main-page").animateRotate(0, 0);
$("#main-page").css("height", "25px");
$("#main-page").css("width", "375px");
$("#main-page").fadeIn();
$("#main-page").animate({
height: "100vh"
}, function() {
$(this).animate({
width: $("body").width()
}, function() {
$(".maincontent").fadeIn(300);
});
});
}, 1400);
});

});

Как я могу сделать его отзывчивым, чтобы вся анимация работала даже в меньших видах просмотра (точно так же)?
jsfiddle

Подробнее здесь: https://stackoverflow.com/questions/309 ... responsive