react-background-animation
Version:
React effect components
30 lines (21 loc) • 3.62 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Mosaic = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _templateObject() {
var data = _taggedTemplateLiteral(["\noverflow:hidden;\nmargin:0;\n&:before{\n\tcontent:'';\n\tposition: fixed;\n\tleft:0;\n\ttop:0;\n\twidth:100vw;\n\theight:100vh;\n\tz-index: 10;\n}\ncanvas{\n\topacity:0;\n\ttransition:1s opacity cubic-bezier(.55,0,.1,1);\n\t&.ready{\n\t\topacity:0.4;\n\t}\n\t\n}\n\n.intro{\n\tposition: absolute;\n\tpadding:20px;\n\ttransform:translate(-50%, -50%);\n\tleft:50%;\n\ttop:50%;\n\ttext-align:center;\n\tcolor:#fafafa;\n\tz-index: 10;\n\twidth:100%;\n\tmax-width:700px;\n\tfont-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif; \n\ttext-shadow:0px 5px 20px black;\n\th1{\n\t\tfont-size:40px;\n\t\tfont-weight:300;\n\t\tletter-spacing:2px;\n\t}\n\tp{\n\t\tletter-spacing:1px;\n\t\tline-height:24px;\n\t}\n}\n"]);
_templateObject = function _templateObject() {
return data;
};
return data;
}
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
// `background:#c4252a url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/cheap_diagonal_fabric.png);
// background-blend-mode: multiply;
// mix-blend-mode: multiply;
var Mosaic = _styledComponents["default"].div(_templateObject());
exports.Mosaic = Mosaic;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jc3NFZmZlY3RzL21vc2FpY0dyb3VuZC9tb3NhaWNTdHlsZWQuanMiXSwibmFtZXMiOlsiTW9zYWljIiwic3R5bGVkIiwiZGl2Il0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFQTtBQUNBO0FBQ0E7QUFFTyxJQUFNQSxNQUFNLEdBQUdDLDZCQUFPQyxHQUFWLG1CQUFaIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdzdHlsZWQtY29tcG9uZW50cydcclxuXHJcbi8vIGBiYWNrZ3JvdW5kOiNjNDI1MmEgdXJsKGh0dHA6Ly9zdWJ0bGVwYXR0ZXJuczIwMTUuc3VidGxlcGF0dGVybnMubmV0ZG5hLWNkbi5jb20vcGF0dGVybnMvY2hlYXBfZGlhZ29uYWxfZmFicmljLnBuZyk7XHJcbi8vICAgICBiYWNrZ3JvdW5kLWJsZW5kLW1vZGU6IG11bHRpcGx5O1xyXG4vLyAgICAgbWl4LWJsZW5kLW1vZGU6IG11bHRpcGx5O1xyXG5cclxuZXhwb3J0IGNvbnN0IE1vc2FpYyA9IHN0eWxlZC5kaXZgXHJcbm92ZXJmbG93OmhpZGRlbjtcclxubWFyZ2luOjA7XHJcbiY6YmVmb3Jle1xyXG5cdGNvbnRlbnQ6Jyc7XHJcblx0cG9zaXRpb246IGZpeGVkO1xyXG5cdGxlZnQ6MDtcclxuXHR0b3A6MDtcclxuXHR3aWR0aDoxMDB2dztcclxuXHRoZWlnaHQ6MTAwdmg7XHJcblx0ei1pbmRleDogMTA7XHJcbn1cclxuY2FudmFze1xyXG5cdG9wYWNpdHk6MDtcclxuXHR0cmFuc2l0aW9uOjFzIG9wYWNpdHkgY3ViaWMtYmV6aWVyKC41NSwwLC4xLDEpO1xyXG5cdCYucmVhZHl7XHJcblx0XHRvcGFjaXR5OjAuNDtcclxuXHR9XHJcblx0XHJcbn1cclxuXHJcbi5pbnRyb3tcclxuXHRwb3NpdGlvbjogYWJzb2x1dGU7XHJcblx0cGFkZGluZzoyMHB4O1xyXG5cdHRyYW5zZm9ybTp0cmFuc2xhdGUoLTUwJSwgLTUwJSk7XHJcblx0bGVmdDo1MCU7XHJcblx0dG9wOjUwJTtcclxuXHR0ZXh0LWFsaWduOmNlbnRlcjtcclxuXHRjb2xvcjojZmFmYWZhO1xyXG5cdHotaW5kZXg6IDEwO1xyXG5cdHdpZHRoOjEwMCU7XHJcblx0bWF4LXdpZHRoOjcwMHB4O1xyXG5cdGZvbnQtZmFtaWx5OiBcIkhlbHZldGljYU5ldWUtTGlnaHRcIiwgXCJIZWx2ZXRpY2EgTmV1ZSBMaWdodFwiLCBcIkhlbHZldGljYSBOZXVlXCIsIEhlbHZldGljYSwgQXJpYWwsIFwiTHVjaWRhIEdyYW5kZVwiLCBzYW5zLXNlcmlmOyBcclxuXHR0ZXh0LXNoYWRvdzowcHggNXB4IDIwcHggYmxhY2s7XHJcblx0aDF7XHJcblx0XHRmb250LXNpemU6NDBweDtcclxuXHRcdGZvbnQtd2VpZ2h0OjMwMDtcclxuXHRcdGxldHRlci1zcGFjaW5nOjJweDtcclxuXHR9XHJcblx0cHtcclxuXHRcdGxldHRlci1zcGFjaW5nOjFweDtcclxuXHRcdGxpbmUtaGVpZ2h0OjI0cHg7XHJcblx0fVxyXG59XHJcbmAiXX0=