神秘菜鸟

好吧其实一点也不神秘，但菜是真的

备份一个不错的跳转单页

写于
更新于

因为最近有用到单页跳转的功能，发现一个挺有黑客气氛的跳转页面，备份一下。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="refresh" content="5; URL=https://synblog.gq/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳转页面</title>
    <style>
        @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400);

        html,
        body {
            height: 100%;
        }

        body {
            background: radial-gradient(#222922, #000500);
            font-family: "Source Code Pro", monospace;
            font-weight: 400;
            overflow: hidden;
            padding: 30px 0 0 30px;
            text-align: center;
        }

        .word {
            bottom: 0;
            color: #fff;
            font-size: 2.5em;
            height: 2.5em;
            left: 0;
            line-height: 2.5em;
            margin: auto;
            right: 0;
            position: absolute;
            text-shadow: 0 0 10px rgba(50, 255, 50, 0.5), 0 0 5px rgba(100, 255, 100, 0.5);
            top: 0;
        }

        .word span {
            display: inline-block;
            transform: translateX(100%) scale(0.9);
            transition: transform 500ms;
        }

        .word .done {
            color: #6f6;
            transform: translateX(0) scale(1);
        }

        .overlay {
            background-image: linear-gradient(transparent 0%, rgba(10, 16, 10, 0.5) 50%);
            background-size: 1000px 2px;
            bottom: 0;
            content: "";
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
    </style>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>
</head>

<body>
    <div class="word">LOADING...</div>
    <div class="overlay"></div>

    <script>
        function Ticker(elem) {
            elem.lettering();
            this.done = false;
            this.cycleCount = 5;
            this.cycleCurrent = 0;
            this.chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!@#$%^&*()-_=+{}|[]\\;\':"<>?,./`~'.split('');
            this.charsCount = this.chars.length;
            this.letters = elem.find('span');
            this.letterCount = this.letters.length;
            this.letterCurrent = 0;

            this.letters.each(function () {
                var $this = $(this);
                $this.attr('data-orig', $this.text());
                $this.text('-');
            });
        }

        Ticker.prototype.getChar = function () {
            return this.chars[Math.floor(Math.random() * this.charsCount)];
        };

        Ticker.prototype.reset = function () {
            this.done = false;
            this.cycleCurrent = 0;
            this.letterCurrent = 0;
            this.letters.each(function () {
                var $this = $(this);
                $this.text($this.attr('data-orig'));
                $this.removeClass('done');
            });
            this.loop();
        };

        Ticker.prototype.loop = function () {
            var self = this;

            this.letters.each(function (index, elem) {
                var $elem = $(elem);
                if (index >= self.letterCurrent) {
                    if ($elem.text() !== ' ') {
                        $elem.text(self.getChar());
                        $elem.css('opacity', Math.random());
                    }
                }
            });

            if (this.cycleCurrent < this.cycleCount) {
                this.cycleCurrent++;
            } else if (this.letterCurrent < this.letterCount) {
                var currLetter = this.letters.eq(this.letterCurrent);
                this.cycleCurrent = 0;
                currLetter.text(currLetter.attr('data-orig')).css('opacity', 1).addClass('done');
                this.letterCurrent++;
            } else {
                this.done = true;
            }

            if (!this.done) {
                requestAnimationFrame(function () {
                    self.loop();
                });
            } else {
                setTimeout(function () {
                    self.reset();
                }, 750);
            }
        };

        $words = $('.word');

        $words.each(function () {
            var $this = $(this),
                ticker = new Ticker($this).reset();
            $this.data('ticker', ticker);
        });
    </script>
</body>

</html>

meta里的url更改跳转的网址，content里更改跳转等待时间，单位为秒，div里更改显示的信息。