react-background-animation
Version:
React effect components
119 lines (90 loc) • 13.7 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _lodash = _interopRequireDefault(require("lodash"));
var _jquery = _interopRequireDefault(require("jquery"));
var _rainStyled = require("./rainStyled");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
var RainEffect =
/*#__PURE__*/
function (_PureComponent) {
_inherits(RainEffect, _PureComponent);
function RainEffect(props) {
var _this;
_classCallCheck(this, RainEffect);
_this = _possibleConstructorReturn(this, _getPrototypeOf(RainEffect).call(this, props));
_this.excuteEffect = _this.excuteEffect.bind(_assertThisInitialized(_this));
_this.makeItRain = _this.makeItRain.bind(_assertThisInitialized(_this));
return _this;
}
_createClass(RainEffect, [{
key: "makeItRain",
value: function makeItRain() {
//clear out everything
(0, _jquery["default"])('.rain').empty();
var increment = 0;
var drops = "";
var backDrops = "";
while (increment < 120) {
//couple random numbers to use for various randomizations
//random number between 98 and 1
var randoHundo = Math.floor(Math.random() * (98 - 1 + 1) + 1); //random number between 5 and 2
var randoFiver = Math.floor(Math.random() * (5 - 2 + 1) + 2); //increment
increment += randoFiver; //add in a new raindrop with various randomizations to certain CSS properties
drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
}
(0, _jquery["default"])('.rain.front-row').append(drops);
(0, _jquery["default"])('.rain.back-row').append(backDrops);
}
}, {
key: "excuteEffect",
value: function excuteEffect() {
this.makeItRain();
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.excuteEffect();
}
}, {
key: "render",
value: function render() {
var _this$props = this.props,
_this$props$frontRow = _this$props.frontRow,
frontRow = _this$props$frontRow === void 0 ? true : _this$props$frontRow,
_this$props$backRow = _this$props.backRow,
backRow = _this$props$backRow === void 0 ? true : _this$props$backRow,
_this$props$single = _this$props.single,
single = _this$props$single === void 0 ? false : _this$props$single,
className = _this$props.className;
return _react["default"].createElement("div", {
className: this.props.className || ''
}, _react["default"].createElement(_rainStyled.Rain, null, _react["default"].createElement("div", {
className: "back-row-toggle splat-toggle ".concat(single ? 'single-toggle' : '', " ").concat(className || '')
}, frontRow && _react["default"].createElement("div", {
className: "rain front-row"
}), backRow && _react["default"].createElement("div", {
className: "rain back-row"
}))));
}
}]);
return RainEffect;
}(_react.PureComponent);
var _default = RainEffect;
exports["default"] = _default;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jc3NFZmZlY3RzL3JhaW4vcmFpbi5qc3giXSwibmFtZXMiOlsiUmFpbkVmZmVjdCIsInByb3BzIiwiZXhjdXRlRWZmZWN0IiwiYmluZCIsIm1ha2VJdFJhaW4iLCJlbXB0eSIsImluY3JlbWVudCIsImRyb3BzIiwiYmFja0Ryb3BzIiwicmFuZG9IdW5kbyIsIk1hdGgiLCJmbG9vciIsInJhbmRvbSIsInJhbmRvRml2ZXIiLCJhcHBlbmQiLCJmcm9udFJvdyIsImJhY2tSb3ciLCJzaW5nbGUiLCJjbGFzc05hbWUiLCJQdXJlQ29tcG9uZW50Il0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUE7O0FBQ0E7O0FBQ0E7O0FBR0E7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0lBRU1BLFU7Ozs7O0FBRUosc0JBQVlDLEtBQVosRUFBbUI7QUFBQTs7QUFBQTs7QUFDakIsb0ZBQU1BLEtBQU47QUFDQSxVQUFLQyxZQUFMLEdBQW9CLE1BQUtBLFlBQUwsQ0FBa0JDLElBQWxCLCtCQUFwQjtBQUNBLFVBQUtDLFVBQUwsR0FBa0IsTUFBS0EsVUFBTCxDQUFnQkQsSUFBaEIsK0JBQWxCO0FBSGlCO0FBSWxCOzs7O2lDQUVZO0FBQ1g7QUFDQSw4QkFBRSxPQUFGLEVBQVdFLEtBQVg7QUFFQSxVQUFJQyxTQUFTLEdBQUcsQ0FBaEI7QUFDQSxVQUFJQyxLQUFLLEdBQUcsRUFBWjtBQUNBLFVBQUlDLFNBQVMsR0FBRyxFQUFoQjs7QUFFQSxhQUFPRixTQUFTLEdBQUcsR0FBbkIsRUFBd0I7QUFDdEI7QUFDQTtBQUNBLFlBQUlHLFVBQVUsR0FBSUMsSUFBSSxDQUFDQyxLQUFMLENBQVdELElBQUksQ0FBQ0UsTUFBTCxNQUFpQixLQUFLLENBQUwsR0FBUyxDQUExQixJQUErQixDQUExQyxDQUFsQixDQUhzQixDQUl0Qjs7QUFDQSxZQUFJQyxVQUFVLEdBQUlILElBQUksQ0FBQ0MsS0FBTCxDQUFXRCxJQUFJLENBQUNFLE1BQUwsTUFBaUIsSUFBSSxDQUFKLEdBQVEsQ0FBekIsSUFBOEIsQ0FBekMsQ0FBbEIsQ0FMc0IsQ0FNdEI7O0FBQ0FOLFFBQUFBLFNBQVMsSUFBSU8sVUFBYixDQVBzQixDQVF0Qjs7QUFDQU4sUUFBQUEsS0FBSyxJQUFJLG9DQUFvQ0QsU0FBcEMsR0FBZ0QsYUFBaEQsSUFBaUVPLFVBQVUsR0FBR0EsVUFBYixHQUEwQixDQUExQixHQUE4QixHQUEvRixJQUFzRyx3QkFBdEcsR0FBaUlKLFVBQWpJLEdBQThJLDRCQUE5SSxHQUE2S0EsVUFBN0ssR0FBMEwsa0RBQTFMLEdBQStPQSxVQUEvTyxHQUE0UCw0QkFBNVAsR0FBMlJBLFVBQTNSLEdBQXdTLHlEQUF4UyxHQUFvV0EsVUFBcFcsR0FBaVgsNEJBQWpYLEdBQWdaQSxVQUFoWixHQUE2WixrQkFBdGE7QUFDQUQsUUFBQUEsU0FBUyxJQUFJLHFDQUFxQ0YsU0FBckMsR0FBaUQsYUFBakQsSUFBa0VPLFVBQVUsR0FBR0EsVUFBYixHQUEwQixDQUExQixHQUE4QixHQUFoRyxJQUF1Ryx3QkFBdkcsR0FBa0lKLFVBQWxJLEdBQStJLDRCQUEvSSxHQUE4S0EsVUFBOUssR0FBMkwsa0RBQTNMLEdBQWdQQSxVQUFoUCxHQUE2UCw0QkFBN1AsR0FBNFJBLFVBQTVSLEdBQXlTLHlEQUF6UyxHQUFxV0EsVUFBclcsR0FBa1gsNEJBQWxYLEdBQWlaQSxVQUFqWixHQUE4WixrQkFBM2E7QUFDRDs7QUFFRCw4QkFBRSxpQkFBRixFQUFxQkssTUFBckIsQ0FBNEJQLEtBQTVCO0FBQ0EsOEJBQUUsZ0JBQUYsRUFBb0JPLE1BQXBCLENBQTJCTixTQUEzQjtBQUNEOzs7bUNBRWM7QUFDYixXQUFLSixVQUFMO0FBQ0Q7Ozt3Q0FFbUI7QUFDbEIsV0FBS0YsWUFBTDtBQUNEOzs7NkJBRVE7QUFBQSx3QkFDZ0UsS0FBS0QsS0FEckU7QUFBQSw2Q0FDQ2MsUUFERDtBQUFBLFVBQ0NBLFFBREQscUNBQ1ksSUFEWjtBQUFBLDRDQUNrQkMsT0FEbEI7QUFBQSxVQUNrQkEsT0FEbEIsb0NBQzRCLElBRDVCO0FBQUEsMkNBQ2tDQyxNQURsQztBQUFBLFVBQ2tDQSxNQURsQyxtQ0FDMkMsS0FEM0M7QUFBQSxVQUNrREMsU0FEbEQsZUFDa0RBLFNBRGxEO0FBRVAsYUFDRTtBQUFLLFFBQUEsU0FBUyxFQUFFLEtBQUtqQixLQUFMLENBQVdpQixTQUFYLElBQXdCO0FBQXhDLFNBQ0UsZ0NBQUMsZ0JBQUQsUUFDRTtBQUFLLFFBQUEsU0FBUyx5Q0FBa0NELE1BQU0sR0FBRyxlQUFILEdBQXFCLEVBQTdELGNBQW1FQyxTQUFTLElBQUksRUFBaEY7QUFBZCxTQUNHSCxRQUFRLElBQUk7QUFBSyxRQUFBLFNBQVMsRUFBQztBQUFmLFFBRGYsRUFFR0MsT0FBTyxJQUFJO0FBQUssUUFBQSxTQUFTLEVBQUM7QUFBZixRQUZkLENBREYsQ0FERixDQURGO0FBVUQ7Ozs7RUFyRHNCRyxvQjs7ZUF3RFZuQixVIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IFB1cmVDb21wb25lbnQgfSBmcm9tICdyZWFjdCc7XHJcbmltcG9ydCBfIGZyb20gJ2xvZGFzaCdcclxuaW1wb3J0ICQgZnJvbSAnanF1ZXJ5J1xyXG5cclxuLy8gaW1wb3J0ICcuL3JhaW4uc2NzcydcclxuaW1wb3J0IHsgUmFpbiB9IGZyb20gJy4vcmFpblN0eWxlZCdcclxuXHJcbmNsYXNzIFJhaW5FZmZlY3QgZXh0ZW5kcyBQdXJlQ29tcG9uZW50IHtcclxuXHJcbiAgY29uc3RydWN0b3IocHJvcHMpIHtcclxuICAgIHN1cGVyKHByb3BzKVxyXG4gICAgdGhpcy5leGN1dGVFZmZlY3QgPSB0aGlzLmV4Y3V0ZUVmZmVjdC5iaW5kKHRoaXMpXHJcbiAgICB0aGlzLm1ha2VJdFJhaW4gPSB0aGlzLm1ha2VJdFJhaW4uYmluZCh0aGlzKVxyXG4gIH1cclxuXHJcbiAgbWFrZUl0UmFpbigpIHtcclxuICAgIC8vY2xlYXIgb3V0IGV2ZXJ5dGhpbmdcclxuICAgICQoJy5yYWluJykuZW1wdHkoKTtcclxuXHJcbiAgICB2YXIgaW5jcmVtZW50ID0gMDtcclxuICAgIHZhciBkcm9wcyA9IFwiXCI7XHJcbiAgICB2YXIgYmFja0Ryb3BzID0gXCJcIjtcclxuXHJcbiAgICB3aGlsZSAoaW5jcmVtZW50IDwgMTIwKSB7XHJcbiAgICAgIC8vY291cGxlIHJhbmRvbSBudW1iZXJzIHRvIHVzZSBmb3IgdmFyaW91cyByYW5kb21pemF0aW9uc1xyXG4gICAgICAvL3JhbmRvbSBudW1iZXIgYmV0d2VlbiA5OCBhbmQgMVxyXG4gICAgICB2YXIgcmFuZG9IdW5kbyA9IChNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiAoOTggLSAxICsgMSkgKyAxKSk7XHJcbiAgICAgIC8vcmFuZG9tIG51bWJlciBiZXR3ZWVuIDUgYW5kIDJcclxuICAgICAgdmFyIHJhbmRvRml2ZXIgPSAoTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogKDUgLSAyICsgMSkgKyAyKSk7XHJcbiAgICAgIC8vaW5jcmVtZW50XHJcbiAgICAgIGluY3JlbWVudCArPSByYW5kb0ZpdmVyO1xyXG4gICAgICAvL2FkZCBpbiBhIG5ldyByYWluZHJvcCB3aXRoIHZhcmlvdXMgcmFuZG9taXphdGlvbnMgdG8gY2VydGFpbiBDU1MgcHJvcGVydGllc1xyXG4gICAgICBkcm9wcyArPSAnPGRpdiBjbGFzcz1cImRyb3BcIiBzdHlsZT1cImxlZnQ6ICcgKyBpbmNyZW1lbnQgKyAnJTsgYm90dG9tOiAnICsgKHJhbmRvRml2ZXIgKyByYW5kb0ZpdmVyIC0gMSArIDEwMCkgKyAnJTsgYW5pbWF0aW9uLWRlbGF5OiAwLicgKyByYW5kb0h1bmRvICsgJ3M7IGFuaW1hdGlvbi1kdXJhdGlvbjogMC41JyArIHJhbmRvSHVuZG8gKyAncztcIj48ZGl2IGNsYXNzPVwic3RlbVwiIHN0eWxlPVwiYW5pbWF0aW9uLWRlbGF5OiAwLicgKyByYW5kb0h1bmRvICsgJ3M7IGFuaW1hdGlvbi1kdXJhdGlvbjogMC41JyArIHJhbmRvSHVuZG8gKyAncztcIj48L2Rpdj48ZGl2IGNsYXNzPVwic3BsYXRcIiBzdHlsZT1cImFuaW1hdGlvbi1kZWxheTogMC4nICsgcmFuZG9IdW5kbyArICdzOyBhbmltYXRpb24tZHVyYXRpb246IDAuNScgKyByYW5kb0h1bmRvICsgJ3M7XCI+PC9kaXY+PC9kaXY+JztcclxuICAgICAgYmFja0Ryb3BzICs9ICc8ZGl2IGNsYXNzPVwiZHJvcFwiIHN0eWxlPVwicmlnaHQ6ICcgKyBpbmNyZW1lbnQgKyAnJTsgYm90dG9tOiAnICsgKHJhbmRvRml2ZXIgKyByYW5kb0ZpdmVyIC0gMSArIDEwMCkgKyAnJTsgYW5pbWF0aW9uLWRlbGF5OiAwLicgKyByYW5kb0h1bmRvICsgJ3M7IGFuaW1hdGlvbi1kdXJhdGlvbjogMC41JyArIHJhbmRvSHVuZG8gKyAncztcIj48ZGl2IGNsYXNzPVwic3RlbVwiIHN0eWxlPVwiYW5pbWF0aW9uLWRlbGF5OiAwLicgKyByYW5kb0h1bmRvICsgJ3M7IGFuaW1hdGlvbi1kdXJhdGlvbjogMC41JyArIHJhbmRvSHVuZG8gKyAncztcIj48L2Rpdj48ZGl2IGNsYXNzPVwic3BsYXRcIiBzdHlsZT1cImFuaW1hdGlvbi1kZWxheTogMC4nICsgcmFuZG9IdW5kbyArICdzOyBhbmltYXRpb24tZHVyYXRpb246IDAuNScgKyByYW5kb0h1bmRvICsgJ3M7XCI+PC9kaXY+PC9kaXY+JztcclxuICAgIH1cclxuXHJcbiAgICAkKCcucmFpbi5mcm9udC1yb3cnKS5hcHBlbmQoZHJvcHMpO1xyXG4gICAgJCgnLnJhaW4uYmFjay1yb3cnKS5hcHBlbmQoYmFja0Ryb3BzKTtcclxuICB9XHJcblxyXG4gIGV4Y3V0ZUVmZmVjdCgpIHtcclxuICAgIHRoaXMubWFrZUl0UmFpbigpXHJcbiAgfVxyXG5cclxuICBjb21wb25lbnREaWRNb3VudCgpIHtcclxuICAgIHRoaXMuZXhjdXRlRWZmZWN0KClcclxuICB9XHJcblxyXG4gIHJlbmRlcigpIHtcclxuICAgIGNvbnN0IHsgZnJvbnRSb3cgPSB0cnVlLCBiYWNrUm93ID0gdHJ1ZSwgc2luZ2xlID0gZmFsc2UsIGNsYXNzTmFtZSB9ID0gdGhpcy5wcm9wc1xyXG4gICAgcmV0dXJuIChcclxuICAgICAgPGRpdiBjbGFzc05hbWU9e3RoaXMucHJvcHMuY2xhc3NOYW1lIHx8ICcnfT5cclxuICAgICAgICA8UmFpbj5cclxuICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPXtgYmFjay1yb3ctdG9nZ2xlIHNwbGF0LXRvZ2dsZSAke3NpbmdsZSA/ICdzaW5nbGUtdG9nZ2xlJyA6ICcnfSAke2NsYXNzTmFtZSB8fCAnJ31gfT5cclxuICAgICAgICAgICAge2Zyb250Um93ICYmIDxkaXYgY2xhc3NOYW1lPSdyYWluIGZyb250LXJvdyc+PC9kaXY+fVxyXG4gICAgICAgICAgICB7YmFja1JvdyAmJiA8ZGl2IGNsYXNzTmFtZT0ncmFpbiBiYWNrLXJvdyc+PC9kaXY+fVxyXG4gICAgICAgICAgPC9kaXY+XHJcbiAgICAgICAgPC9SYWluPlxyXG4gICAgICA8L2Rpdj5cclxuICAgIClcclxuICB9XHJcbn1cclxuXHJcbmV4cG9ydCBkZWZhdWx0IFJhaW5FZmZlY3QiXX0=