https://www.nisekoi.jp/assets/js/cherry-blossom.js

1(function() {
2  'use strict';
3  var CherryBlossom, r;
4
5  r = (function() {
6    function r(n) {
7      return ~~((Math.random() * n) + 1);
8    }
9
10    return r;
11
12  })();
13
14  CherryBlossom = (function() {
15    var DUR, HEIGHT, IMG_HEIGHT, IMG_NUM, IMG_WIDTH, INTERVAL, MAX_NUM, WIDTH, lastTime;
16
17    MAX_NUM = 10;
18
19    IMG_NUM = 3;
20
21    IMG_WIDTH = 40;
22
23    IMG_HEIGHT = 0;
24
25    WIDTH = 0;
26
27    HEIGHT = 0;
28
29    DUR = 10000;
30
31    INTERVAL = 300;
32
33    lastTime = new Date().getTime() - INTERVAL;
34
35    function CherryBlossom() {
36      this.init();
37    }
38
39    CherryBlossom.prototype.init = function() {
40      this.cacheElements();
41      return this.bindEvents();
42    };
43
44    CherryBlossom.prototype.cacheElements = function() {
45      this.$wrap = $('#wrap');
46      return this.$target = this.$wrap.find('.hero__visual');
47    };
48
49    CherryBlossom.prototype.bindEvents = function() {
50      var _this;
51      _this = this;
52      return $(window).on({
53        load: function() {
54          _this.getAreaSize();
55          return _this.build();
56        },
57        resize: function() {
58          if ((lastTime + INTERVAL) <= new Date().getTime()) {
59            lastTime = new Date().getTime();
60            return _this.reInitialize();
61          }
62        }
63      });
64    };
65
66    CherryBlossom.prototype.reInitialize = function() {
67      var _this;
68      _this = this;
69      this.getAreaSize();
70      return this.$target.children('.blossom').each(function(i) {
71        return $(this).velocity('stop').velocity('fadeOut', function() {
72          $(this).velocity('fadeIn', 0);
73          return _this.falling(this);
74        });
75      });
76    };
77
78    CherryBlossom.prototype.getAreaSize = function() {
79      WIDTH = this.$target.width();
80      return HEIGHT = this.$target.height();
81    };
82
83    CherryBlossom.prototype.build = function() {
84      var _this, elem, frag, i, img, j, ref;
85      _this = this;
86      frag = document.createDocumentFragment();
87      for (i = j = 0, ref = MAX_NUM; 0 <= ref ? j <= ref : j >= ref; i = 0 <= ref ? ++j : --j) {
88        elem = document.createElement('div');
89        elem.style.position = 'absolute';
90        elem.className = 'blossom';
91        img = document.createElement('img');
92        img.src = 'assets/img/blossom/img_blossom' + ('0' + r(IMG_NUM)).slice(-2) + '.png';
93        img.style.width = IMG_WIDTH + 'px';
94        elem.appendChild(img);
95        frag.appendChild(elem);
96      }
97      this.$target.append(frag);
98      return this.$target.children('.blossom').each(function() {
99        return _this.falling(this);
100      });
101    };
102
103    CherryBlossom.prototype.falling = function(elem) {
104      var $elem, _this, h;
105      _this = this;
106      $elem = $(elem);
107      h = elem.clientHeight;
108      return $elem.css({
109        top: -h + -30,
110        left: r(WIDTH)
111      }).velocity({
112        top: HEIGHT + h,
113        rotateZ: [-360, 0],
114        rotateY: [-3600, 0]
115      }, {
116        duration: DUR,
117        delay: r(DUR),
118        easing: 'linear',
119        complete: function() {
120          elem = this[0];
121          elem.style.top = 0;
122          return _this.falling(elem);
123        }
124      });
125    };
126
127    return CherryBlossom;
128
129  })();
130
131  window.Nisekoi || (window.Nisekoi = {});
132
133  window.Nisekoi.CherryBlossom = CherryBlossom || {};
134
135  $(function() {
136    return CherryBlossom = new window.Nisekoi.CherryBlossom();
137  });
138
139}).call(this);