donghongfei.github.io/index.html at master · donghongfei/donghongfei.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html lang="zh" class="no-js dark">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>小学生·董宏飞</title>
  <meta name="Description" content="Home Page of 董宏飞">
  <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
  <link rel="stylesheet" type="text/css" href="assets/css/main.css"/>
  <script>
  var _hmt = _hmt || [];
  (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?201990663e500043f19067a1bb94c67b";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
  })();
  </script>

</head>

<body>
  <div class="vi">
    <h1 class="animate-slide-in-down">小学生·董宏飞</h1>
    <div class="quote">
      <span class="quote-line quote-line-start animate-slide-in-left"></span>
      <span class="quote-icon quote-icon-start animate-slide-in-down">
        <i class="icon icon-quotes-left"></i>
      </span>
      <p class="quote-content animate-slide-in-down">依然怀抱梦想的非文艺  <SPAN style="TEXT-DECORATION: line-through">IT 男</SPAN>  产品汪，依然对这个世界抱有强烈好奇心的小学生</p>
      <p class="quote-author animate-slide-in-down">我在北京， <strong>你呢？</strong></p>
      <span class="quote-icon quote-icon-end animate-slide-in-up">
        <i class="icon icon-quotes-right"></i>
      </span>
      <span class="quote-line quote-line-end animate-slide-in-right"></span>
    </div>
    <div class="links">
      <a href="https://github.com/DongHongfei" class="animate-slide-in-down">GitHub</a>
      <a href="http://v.donghongfei.com" class="animate-slide-in-down">Blogs</a>
      <a href="http://weibo.com/2012onlyone" class="animate-slide-in-down">WeiBo</a>
      <!--<a href="https://twitter.com/DongHongfei" class="animate-init">Twitter</a>-->
      <a href="http://www.zhihu.com/people/donghongfei" class="animate-slide-in-down">Zhihu</a>
    </div>
    <div class="location">
      <span class="location-icon animate-slide-in-up">
        <i class="icon icon-map-pin"></i>
      </span>
      <span class="location-text animate-slide-in-down">Beijing - China</span>
    </div>
    <div class="relocating">
      Navigating to: <span class="relocate-location"></span>...
    </div>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(function () {
      var SLIDE_IN_DOWN = { opacity: 1, top: 0 };
      var SLIDE_IN_UP = { opacity: 1, bottom: 0 };
      var SLIDE_IN_LEFT = { left: 0 };
      var SLIDE_IN_RIGHT = { right: 0 };

      registerCheatCode();
      executeAnimations();

      function executeAnimations() {
        $.when()
          .then(animateTitle)
          .then(animateQuote)
          .then(animateLinks)
          .then(animateLocation);
      }

      function animateTitle() {
        return animate('h1', SLIDE_IN_DOWN);
      }

      function animateQuote() {
        return $.when(
          animate('.quote-line-start', SLIDE_IN_LEFT),
          animate('.quote-line-end',SLIDE_IN_RIGHT),
          animate('.quote-icon-start', SLIDE_IN_DOWN),
          animate('.quote-icon-end', SLIDE_IN_UP)
        )
          .then(function () {
            return animate('.quote-content', SLIDE_IN_DOWN);
          })
          .then(function () {
            return animate('.quote-author', SLIDE_IN_DOWN);
          });
      }

      function animateLinks() {
        var DELAY_STEP = 200;
        var elements = $('.links a');
        var concurrent = $.makeArray(elements)
          .map(function (element, index) {
            return animate(element, SLIDE_IN_DOWN, index * DELAY_STEP);
          });

        return $.when.apply($, concurrent);
      }

      function animateLocation() {
        return $.when(
          animate('.location-icon', SLIDE_IN_UP),
          animate('.location-text', SLIDE_IN_DOWN)
        );
      }

      function animate(selector, properties, delay, options) {
        delay = delay || 0;
        return $(selector).delay(delay)
          .animate(properties, options)
          .promise();
      }

      function registerCheatCode() {
        $(document.body).on('keydown', function (event) {
          var KEY_B = 66;

          if (event.which === KEY_B) {
            $('.relocate-location').text('Bookmark Page');
            $('.relocating').css('opacity', 1);

            window.setTimeout(function () {
              window.location.href = '/bookmarks.html';
            }, 1000);
          }
        });
      }
    });
  </script>
</body>
</html>