Help us understand the problem. What is going on with this article?

忘年会のために作った昔のテレビみたいに画面遷移するJavaScript

僭越ながら、エヌシーアイ総合システム Advent Calendar 2019 20日目を担当させていただきます。
(投稿が1月中旬になってしまった…)
忘年会のために作ったJavaScriptについて書きます。
ちなみに全体が完成したのは忘年会前日深夜3時でした。

どんな感じで画面遷移するの?

ezgif.com-crop.gif

こんな感じで動きます。
遷移前と遷移後で同じページのように見えますが、別のページに飛んでいます
今や見る影もないブラウン管テレビってこんな感じだった気がします。

大まかな中身としては
 フェードアウトのアニメーション
 ページ移動
 フェードインのアニメーション

の流れになります。

フェードインのアニメーション

順番が逆になりますが、まずフェードインからです。
こちらはCSSだけで作りました。

style.css
body {
    animation: animate_in 1s ease;
}

@keyframes animate_in{
    0%{
        transform: scale(0.2, 0.01);
        opacity: 0;
    }
    70%{
        transform: scale(1, 0.01);
        opacity: 1;
    }
    100%{
        transform: scale(1, 1);
    }
}

@keyframes を使って動きを処理しています。
画面サイズと透明度を変えてそれっぽく見せています

フェードアウトのアニメーション

こちらが本題です。
リンクが押されるとアニメーションが起動するようにJavaScriptを書きます。
またアニメーション終了までページ移動を止める必要があります。

style.css
.animate_content{
    animation: animate_out 1s ease;
}

@keyframes animate_out{
    30%{
        transform: scale(1, 0.01);
    }
    70%{
        transform: scale(0.2, 0.01);
        opacity: 1;
    }
    100%{
        transform: scale(0.2, 0.01);
        opacity: 0;
    }
}
page_transition.js
$(function() {
    $('a:not([href^="#"]):not([target])').on('click', function(e) {

        // ページ移動を止めてURLを取得
        e.preventDefault();
        url = $(this).attr('href');

        // クラスを追加
        $('body').addClass('animate_content');

        // 980ms経ったらページ移動
        setTimeout(function(){
            window.location = url;
        }, 980);

        return false;
    });
});

アニメーションの1s(1000ms)が終わるまでにページ移動しないといけないので、980msで移動させています。
追加するクラス / 追加される属性 を簡単に指定できるので応用は効きそうな気がしますね。

終わりに

学生時代はJavaScriptを避けてきたので勉強しないとですね。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした