react-background-animation
Version:
React effect components
27 lines (18 loc) • 4.02 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Wave = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _templateObject() {
var data = _taggedTemplateLiteral(["\n@keyframes move_wave {\n 0% {\n transform: translateX(0) translateZ(0) scaleY(1)\n }\n 50% {\n transform: translateX(-25%) translateZ(0) scaleY(0.55)\n }\n 100% {\n transform: translateX(-50%) translateZ(0) scaleY(1)\n }\n}\n.waveWrapper {\n overflow: hidden;\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n top: 0;\n margin: auto;\n}\n.bgTop {\n z-index: 15;\n opacity: 0.5;\n}\n.bgMiddle {\n z-index: 10;\n opacity: 0.75;\n}\n.bgBottom {\n z-index: 5;\n}\n.wave {\n position: fixed;\n left: 0;\n bottom: 0;\n width: 200%;\n height: 150px;\n background-repeat: repeat no-repeat;\n background-position: 0 bottom;\n transform-origin: center bottom;\n}\n.waveTop {\n background-size: 50% 100px;\n}\n.waveAnimation .waveTop {\nanimation: move-wave 3s;\n -webkit-animation: move-wave 3s;\n -webkit-animation-delay: 1s;\n animation-delay: 1s;\n}\n.waveMiddle {\n background-size: 50% 120px;\n}\n.waveAnimation .waveMiddle {\n animation: move_wave 10s linear infinite;\n}\n.waveBottom {\n background-size: 50% 100px;\n}\n.waveAnimation .waveBottom {\n animation: move_wave 15s linear infinite;\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) } })); }
var Wave = _styledComponents["default"].div(_templateObject());
exports.Wave = Wave;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jc3NFZmZlY3RzL3dhdmVDbG91ZC93YXZlU3R5bGVkLmpzIl0sIm5hbWVzIjpbIldhdmUiLCJzdHlsZWQiLCJkaXYiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQTs7Ozs7Ozs7Ozs7Ozs7OztBQUVPLElBQU1BLElBQUksR0FBR0MsNkJBQU9DLEdBQVYsbUJBQVYiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ3N0eWxlZC1jb21wb25lbnRzJ1xyXG5cclxuZXhwb3J0IGNvbnN0IFdhdmUgPSBzdHlsZWQuZGl2YFxyXG5Aa2V5ZnJhbWVzIG1vdmVfd2F2ZSB7XHJcbiAgMCUge1xyXG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoMCkgdHJhbnNsYXRlWigwKSBzY2FsZVkoMSlcclxuICB9XHJcbiAgNTAlIHtcclxuICAgICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVYKC0yNSUpIHRyYW5zbGF0ZVooMCkgc2NhbGVZKDAuNTUpXHJcbiAgfVxyXG4gIDEwMCUge1xyXG4gICAgICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVgoLTUwJSkgdHJhbnNsYXRlWigwKSBzY2FsZVkoMSlcclxuICB9XHJcbn1cclxuLndhdmVXcmFwcGVyIHtcclxuICBvdmVyZmxvdzogaGlkZGVuO1xyXG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcclxuICBsZWZ0OiAwO1xyXG4gIHJpZ2h0OiAwO1xyXG4gIGJvdHRvbTogMDtcclxuICB0b3A6IDA7XHJcbiAgbWFyZ2luOiBhdXRvO1xyXG59XHJcbi5iZ1RvcCB7XHJcbiAgei1pbmRleDogMTU7XHJcbiAgb3BhY2l0eTogMC41O1xyXG59XHJcbi5iZ01pZGRsZSB7XHJcbiAgei1pbmRleDogMTA7XHJcbiAgb3BhY2l0eTogMC43NTtcclxufVxyXG4uYmdCb3R0b20ge1xyXG4gIHotaW5kZXg6IDU7XHJcbn1cclxuLndhdmUge1xyXG4gIHBvc2l0aW9uOiBmaXhlZDtcclxuICBsZWZ0OiAwO1xyXG4gIGJvdHRvbTogMDtcclxuICB3aWR0aDogMjAwJTtcclxuICBoZWlnaHQ6IDE1MHB4O1xyXG4gIGJhY2tncm91bmQtcmVwZWF0OiByZXBlYXQgbm8tcmVwZWF0O1xyXG4gIGJhY2tncm91bmQtcG9zaXRpb246IDAgYm90dG9tO1xyXG4gIHRyYW5zZm9ybS1vcmlnaW46IGNlbnRlciBib3R0b207XHJcbn1cclxuLndhdmVUb3Age1xyXG4gIGJhY2tncm91bmQtc2l6ZTogNTAlIDEwMHB4O1xyXG59XHJcbi53YXZlQW5pbWF0aW9uIC53YXZlVG9wIHtcclxuYW5pbWF0aW9uOiBtb3ZlLXdhdmUgM3M7XHJcbiAtd2Via2l0LWFuaW1hdGlvbjogbW92ZS13YXZlIDNzO1xyXG4gLXdlYmtpdC1hbmltYXRpb24tZGVsYXk6IDFzO1xyXG4gYW5pbWF0aW9uLWRlbGF5OiAxcztcclxufVxyXG4ud2F2ZU1pZGRsZSB7XHJcbiAgYmFja2dyb3VuZC1zaXplOiA1MCUgMTIwcHg7XHJcbn1cclxuLndhdmVBbmltYXRpb24gLndhdmVNaWRkbGUge1xyXG4gIGFuaW1hdGlvbjogbW92ZV93YXZlIDEwcyBsaW5lYXIgaW5maW5pdGU7XHJcbn1cclxuLndhdmVCb3R0b20ge1xyXG4gIGJhY2tncm91bmQtc2l6ZTogNTAlIDEwMHB4O1xyXG59XHJcbi53YXZlQW5pbWF0aW9uIC53YXZlQm90dG9tIHtcclxuICBhbmltYXRpb246IG1vdmVfd2F2ZSAxNXMgbGluZWFyIGluZmluaXRlO1xyXG59XHJcbmAiXX0=