Как создать полноэкранную анимацию CSS переходов

Раньше, добавление переходов страниц было очень сложным процессом. При нажатии по ссылке, происходит перенаправление к следующей странице.

Сложность

HTML разметка

В HTML структуре, мы создаем два контейнера div, для двух страниц, с классами main-page и next-page.

<div id="main-page">
 <!--- Main Content Here -->
   </div>
    
<div id="next-page">
 <!--- Next Page Content Here -->
</div>

Далее, давайте добавим контент внутри контейнеров. Для каждой страницы, мы добавим ссылку с соответствующим классом mainlink или nextlink.

<div id="main-page">
            <div class="maincontent">
                 <h1>Full Page Transition</h1>
                <a class="mainlink">TRY IT NOW ➜</a>
                
            </div>
        </div>
             
        <div id="next-page">
            <div class="nextcontent">
                 <h1>Great! You're in the 2nd Page!</h1>
                <a class="nextlink"> &#8592 GO BACK</a>
            </div>
</div>

Добавление стилей

Теперь давайте определим основные стили разметки. Зададим 100% ширину для элемента body и установим настройки шрифтов для элемента h1.

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

Перейдем к стилю страниц main-page и next-page. Ссылки имеют одинаковые свойства, за исключением цвета фона. Я добавил свойство position: absolute и скрыл их при помощи display: none.

#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;
}

jQuery

В jQuery, создадим радикальную функцию, которая будет выполнять пользовательскую анимацию через CSS свойства.

$(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 и скроем её.

$("#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: "100%"
                }, 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: "100%"
                }, function() {
                    $(".maincontent").fadeIn(300);
                });
            });
        }, 1400);
    });
     
});
ДЕМО СКАЧАТЬ

 

Перевод статьи How to Create a Full Page Animated Transition

Тэги: transitionanimate

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.