react-background-animation
Version:
React effect components
27 lines (18 loc) • 9.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Traveler = void 0;
var _styledComponents = _interopRequireDefault(require("styled-components"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _templateObject() {
var data = _taggedTemplateLiteral(["\n@import url(https://fonts.googleapis.com/css?family=Pathway+Gothic+One);\n\n// body {\n// background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#f2efd9 100%);\n// }\n\n@keyframes rotate-right {\n from { \n -webkit-transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(360deg);\n }\n}\n\n@keyframes rotate-left {\n from { \n -webkit-transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(-360deg);\n }\n}\n\n@keyframes hover {\n 0% {\n -webkit-transform: translateY(0%); \n }\n 50% {\n -webkit-transform: translateY(5%); \n } \n 100% {\n -webkit-transform: translateY(0%);\n } \n}\n\n@keyframes pull {\n 0% {\n -webkit-transform: scaleY(1);\n }\n 40% {\n -webkit-transform: scaleY(1.01);\n }\n 60% {\n -webkit-transform: scaleY(0.99);\n }\n 80% {\n -webkit-transform: scaleY(1.01);\n }\n 100% {\n -webkit-transform: scaleY(0.99);\n } \n 80% {\n -webkit-transform: scaleY(1.01);\n }\n 100% {\n -webkit-transform: scaleY(1);\n } \n}\n\n@function getSpeed($speed, $type:turtle) {\n $secs: 360;\n $divider: 1;\n @if($type == turtle) {\n $divider: 1;\n } @else if($type == rabbit) {\n $divider: 10;\n } @else {\n $divider: 60;\n }\n @if $speed == fastest {\n $secs: 60 / $divider;\n } @else if $speed == really-fast {\n $secs: 120 / $divider;\n } @else if $speed == fast {\n $secs: 180 / $divider;\n } @else if $speed == slow {\n $secs: 240 / $divider;\n } @else if $speed == really-slow {\n $secs: 300 / $divider;\n } @else if $speed == slowest {\n $secs: 360 / $divider;\n }\n @return #{$secs}s;\n}\n\n@mixin _rotate-animation($direction, $speed, $type) {\n -webkit-transform: translate3d(0, 0, 0);\n -webkit-animation: rotate-#{$direction} getSpeed($speed, $type) linear 0s infinite;\n}\n\n@mixin _hover-animation($duration, $delay) {\n -webkit-transform: translate3d(0, 0, 0);\n -webkit-animation: hover #{$duration}s linear #{$delay}s infinite; \n}\n\n@mixin _pull-animation($duration, $delay, $x: 200px, $y: 200px) {\n -webkit-transform: translate3d(0, 0, 0);\n -webkit-transform-origin: $x $y;\n -webkit-animation: pull #{$duration}s linear #{$delay}s infinite alternate; \n}\n\n@mixin rotate($type, $direction: left, $speed: slow, $x: 200px, $y: 200px) {\n -webkit-transform: translate3d(0, 0, 0);\n -webkit-transform-origin: $x $y;\n @include _rotate-animation($direction, $speed, $type);\n}\n\n#airplane2, #airplane1 {\n @include rotate(turtle, right, fastest);\n}\n\n#countryObjects {\n @include rotate(turtle, right, slow);\n}\n\n#floatingGlobe {\n @include rotate(turtle, left, normal);\n}\n\n#globe {\n $duration: 0;\n $delay: 0;\n @include _hover-animation($duration, $delay);\n}\n\n#windmill {\n @include rotate(flash, right, really-fast, 331px, 201px);\n}\n\n// Clouds\n@for $i from 1 through 3 {\n #cloud#{$i} {\n @include _hover-animation(3, $i);\n }\n}\n\n\n// Inner Circles\n@for $i from 1 through 5 {\n $direction: left;\n $speed: really-fast;\n #circle#{$i} {\n @if $i % 2 == 1 {\n $direction: right;\n $speed: really-fast;\n } @else {\n $direction: left;\n $speed: slow;\n }\n @include rotate(rabbit, $direction, $speed);\n }\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 Traveler = _styledComponents["default"].div(_templateObject());
exports.Traveler = Traveler;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jc3NFZmZlY3RzL2JlY29tZVRyYXZlbGVyL3RyYXZlbGVyU3R5bGVkLmpzIl0sIm5hbWVzIjpbIlRyYXZlbGVyIiwic3R5bGVkIiwiZGl2Il0sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUE7Ozs7Ozs7Ozs7Ozs7Ozs7QUFFTyxJQUFNQSxRQUFRLEdBQUdDLDZCQUFPQyxHQUFWLG1CQUFkIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdzdHlsZWQtY29tcG9uZW50cydcclxuXHJcbmV4cG9ydCBjb25zdCBUcmF2ZWxlciA9IHN0eWxlZC5kaXZgXHJcbkBpbXBvcnQgdXJsKGh0dHBzOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vY3NzP2ZhbWlseT1QYXRod2F5K0dvdGhpYytPbmUpO1xyXG5cclxuLy8gYm9keSB7XHJcbi8vICAgYmFja2dyb3VuZDogLXdlYmtpdC1yYWRpYWwtZ3JhZGllbnQoY2VudGVyLCBlbGxpcHNlIGNvdmVyLCAjZmZmZmZmIDAlLCNmMmVmZDkgMTAwJSk7XHJcbi8vIH1cclxuXHJcbkBrZXlmcmFtZXMgcm90YXRlLXJpZ2h0IHtcclxuICBmcm9tIHsgXHJcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xyXG4gIH1cclxuICB0byB7XHJcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7XHJcbiAgfVxyXG59XHJcblxyXG5Aa2V5ZnJhbWVzIHJvdGF0ZS1sZWZ0IHtcclxuICBmcm9tIHsgXHJcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKDBkZWcpO1xyXG4gIH1cclxuICB0byB7XHJcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogcm90YXRlKC0zNjBkZWcpO1xyXG4gIH1cclxufVxyXG5cclxuQGtleWZyYW1lcyBob3ZlciB7XHJcbiAgMCUge1xyXG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpOyAgXHJcbiAgfVxyXG4gIDUwJSB7XHJcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogdHJhbnNsYXRlWSg1JSk7ICBcclxuICB9IFxyXG4gIDEwMCUge1xyXG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCUpO1xyXG4gIH0gICAgIFxyXG59XHJcblxyXG5Aa2V5ZnJhbWVzIHB1bGwge1xyXG4gIDAlIHtcclxuICAgIC13ZWJraXQtdHJhbnNmb3JtOiBzY2FsZVkoMSk7XHJcbiAgfVxyXG4gIDQwJSB7XHJcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogc2NhbGVZKDEuMDEpO1xyXG4gIH1cclxuICA2MCUge1xyXG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHNjYWxlWSgwLjk5KTtcclxuICB9XHJcbiAgODAlIHtcclxuICAgIC13ZWJraXQtdHJhbnNmb3JtOiBzY2FsZVkoMS4wMSk7XHJcbiAgfVxyXG4gIDEwMCUge1xyXG4gICAgLXdlYmtpdC10cmFuc2Zvcm06IHNjYWxlWSgwLjk5KTtcclxuICB9ICAgICAgIFxyXG4gIDgwJSB7XHJcbiAgICAtd2Via2l0LXRyYW5zZm9ybTogc2NhbGVZKDEuMDEpO1xyXG4gIH1cclxuICAxMDAlIHtcclxuICAgIC13ZWJraXQtdHJhbnNmb3JtOiBzY2FsZVkoMSk7XHJcbiAgfSAgIFxyXG59XHJcblxyXG5AZnVuY3Rpb24gZ2V0U3BlZWQoJHNwZWVkLCAkdHlwZTp0dXJ0bGUpIHtcclxuICAkc2VjczogMzYwO1xyXG4gICRkaXZpZGVyOiAxO1xyXG4gIEBpZigkdHlwZSA9PSB0dXJ0bGUpIHtcclxuICAgICRkaXZpZGVyOiAxO1xyXG4gIH0gQGVsc2UgaWYoJHR5cGUgPT0gcmFiYml0KSB7XHJcbiAgICAkZGl2aWRlcjogMTA7XHJcbiAgfSBAZWxzZSB7XHJcbiAgICAkZGl2aWRlcjogNjA7XHJcbiAgfVxyXG4gIEBpZiAkc3BlZWQgPT0gZmFzdGVzdCB7XHJcbiAgICAkc2VjczogNjAgLyAkZGl2aWRlcjtcclxuICB9IEBlbHNlIGlmICRzcGVlZCA9PSByZWFsbHktZmFzdCB7XHJcbiAgICAkc2VjczogMTIwIC8gJGRpdmlkZXI7XHJcbiAgfSBAZWxzZSBpZiAkc3BlZWQgPT0gZmFzdCB7XHJcbiAgICAkc2VjczogMTgwIC8gJGRpdmlkZXI7XHJcbiAgfSBAZWxzZSBpZiAkc3BlZWQgPT0gc2xvdyB7XHJcbiAgICAkc2VjczogMjQwIC8gJGRpdmlkZXI7XHJcbiAgfSBAZWxzZSBpZiAkc3BlZWQgPT0gcmVhbGx5LXNsb3cge1xyXG4gICAgJHNlY3M6IDMwMCAvICRkaXZpZGVyO1xyXG4gIH0gQGVsc2UgaWYgJHNwZWVkID09IHNsb3dlc3Qge1xyXG4gICAgJHNlY3M6IDM2MCAvICRkaXZpZGVyO1xyXG4gIH1cclxuICBAcmV0dXJuICN7JHNlY3N9cztcclxufVxyXG5cclxuQG1peGluIF9yb3RhdGUtYW5pbWF0aW9uKCRkaXJlY3Rpb24sICRzcGVlZCwgJHR5cGUpIHtcclxuICAtd2Via2l0LXRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgMCwgMCk7XHJcbiAgLXdlYmtpdC1hbmltYXRpb246IHJvdGF0ZS0jeyRkaXJlY3Rpb259IGdldFNwZWVkKCRzcGVlZCwgJHR5cGUpIGxpbmVhciAwcyBpbmZpbml0ZTtcclxufVxyXG5cclxuQG1peGluIF9ob3Zlci1hbmltYXRpb24oJGR1cmF0aW9uLCAkZGVsYXkpIHtcclxuICAtd2Via2l0LXRyYW5zZm9ybTogdHJhbnNsYXRlM2QoMCwgMCwgMCk7XHJcbiAgLXdlYmtpdC1hbmltYXRpb246IGhvdmVyICN7JGR1cmF0aW9ufXMgbGluZWFyICN7JGRlbGF5fXMgaW5maW5pdGU7IFxyXG59XHJcblxyXG5AbWl4aW4gX3B1bGwtYW5pbWF0aW9uKCRkdXJhdGlvbiwgJGRlbGF5LCAkeDogMjAwcHgsICR5OiAyMDBweCkge1xyXG4gIC13ZWJraXQtdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcclxuICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46ICR4ICR5O1xyXG4gIC13ZWJraXQtYW5pbWF0aW9uOiBwdWxsICN7JGR1cmF0aW9ufXMgbGluZWFyICN7JGRlbGF5fXMgaW5maW5pdGUgYWx0ZXJuYXRlOyBcclxufVxyXG5cclxuQG1peGluIHJvdGF0ZSgkdHlwZSwgJGRpcmVjdGlvbjogbGVmdCwgJHNwZWVkOiBzbG93LCAkeDogMjAwcHgsICR5OiAyMDBweCkge1xyXG4gIC13ZWJraXQtdHJhbnNmb3JtOiB0cmFuc2xhdGUzZCgwLCAwLCAwKTtcclxuICAtd2Via2l0LXRyYW5zZm9ybS1vcmlnaW46ICR4ICR5O1xyXG4gIEBpbmNsdWRlIF9yb3RhdGUtYW5pbWF0aW9uKCRkaXJlY3Rpb24sICRzcGVlZCwgJHR5cGUpO1xyXG59XHJcblxyXG4jYWlycGxhbmUyLCAjYWlycGxhbmUxIHtcclxuICBAaW5jbHVkZSByb3RhdGUodHVydGxlLCByaWdodCwgZmFzdGVzdCk7XHJcbn1cclxuXHJcbiNjb3VudHJ5T2JqZWN0cyB7XHJcbiAgQGluY2x1ZGUgcm90YXRlKHR1cnRsZSwgcmlnaHQsIHNsb3cpO1xyXG59XHJcblxyXG4jZmxvYXRpbmdHbG9iZSB7XHJcbiAgQGluY2x1ZGUgcm90YXRlKHR1cnRsZSwgbGVmdCwgbm9ybWFsKTtcclxufVxyXG5cclxuI2dsb2JlIHtcclxuICAkZHVyYXRpb246IDA7XHJcbiAgJGRlbGF5OiAwO1xyXG4gIEBpbmNsdWRlIF9ob3Zlci1hbmltYXRpb24oJGR1cmF0aW9uLCAkZGVsYXkpO1xyXG59XHJcblxyXG4jd2luZG1pbGwge1xyXG4gIEBpbmNsdWRlIHJvdGF0ZShmbGFzaCwgcmlnaHQsIHJlYWxseS1mYXN0LCAzMzFweCwgMjAxcHgpO1xyXG59XHJcblxyXG4vLyBDbG91ZHNcclxuQGZvciAkaSBmcm9tIDEgdGhyb3VnaCAzIHtcclxuICAjY2xvdWQjeyRpfSB7XHJcbiAgICBAaW5jbHVkZSBfaG92ZXItYW5pbWF0aW9uKDMsICRpKTtcclxuICB9XHJcbn1cclxuXHJcblxyXG4vLyBJbm5lciBDaXJjbGVzXHJcbkBmb3IgJGkgZnJvbSAxIHRocm91Z2ggNSB7XHJcbiAgJGRpcmVjdGlvbjogbGVmdDtcclxuICAkc3BlZWQ6IHJlYWxseS1mYXN0O1xyXG4gICNjaXJjbGUjeyRpfSB7XHJcbiAgICBAaWYgJGkgJSAyID09IDEge1xyXG4gICAgICAkZGlyZWN0aW9uOiByaWdodDtcclxuICAgICAgJHNwZWVkOiByZWFsbHktZmFzdDtcclxuICAgIH0gQGVsc2Uge1xyXG4gICAgICAkZGlyZWN0aW9uOiBsZWZ0O1xyXG4gICAgICAkc3BlZWQ6IHNsb3c7XHJcbiAgICB9XHJcbiAgICBAaW5jbHVkZSByb3RhdGUocmFiYml0LCAkZGlyZWN0aW9uLCAkc3BlZWQpO1xyXG4gIH1cclxufVxyXG5gIl19