ng-marquee
Version:
Angular 8+ CSS Marquee (Alternative To HTML Marquee Tag)
2 lines • 7.61 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-marquee",["exports","@angular/core","@angular/common"],t):t((e=e||self)["ng-marquee"]={},e.ng.core,e.ng.common)}(this,(function(e,t,a){"use strict";var n={left:"left",right:"right",alternate:"alternate"},r={drowsy:"drowsy",slow:"slow",normal:"normal",fast:"fast",swift:"swift",hyper:"hyper"},s=function(){function e(){this.stopOnHover=!1,this.marqueeDirection=n,this.marqueeSpeed=r}return e.prototype.ngOnInit=function(){},e.decorators=[{type:t.Component,args:[{selector:"ng-marquee",template:"<div class=\"ng-marquee\" [ngClass]=\"{\n 'ng-marquee-direction-left': marqueeDirection.left === direction,\n 'ng-marquee-direction-right': marqueeDirection.right === direction,\n 'ng-marquee-direction-alternate': marqueeDirection.alternate === direction,\n 'ng-marquee-speed-drowsy': marqueeSpeed.drowsy === speed,\n 'ng-marquee-speed-slow': marqueeSpeed.slow === speed,\n 'ng-marquee-speed-normal': marqueeSpeed.normal === speed,\n 'ng-marquee-speed-fast': marqueeSpeed.fast === speed,\n 'ng-marquee-speed-swift': marqueeSpeed.swift === speed,\n 'ng-marquee-speed-hyper': marqueeSpeed.hyper === speed,\n 'ng-marquee-stop-on-hover': stopOnHover\n}\">\n <span [ngStyle]=\"{'animation-duration': duration}\">\n <ng-content></ng-content>\n </span>\n</div>",changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[".ng-marquee{overflow:hidden;text-align:left}.ng-marquee.ng-marquee-speed-drowsy>span{-webkit-animation-duration:30s;animation-duration:30s}.ng-marquee.ng-marquee-speed-slow>span{-webkit-animation-duration:20s;animation-duration:20s}.ng-marquee.ng-marquee-speed-normal>span{-webkit-animation-duration:10s;animation-duration:10s}.ng-marquee.ng-marquee-speed-fast>span{-webkit-animation-duration:7s;animation-duration:7s}.ng-marquee.ng-marquee-speed-swift>span{-webkit-animation-duration:5s;animation-duration:5s}.ng-marquee.ng-marquee-speed-hyper>span{-webkit-animation-duration:2s;animation-duration:2s}.ng-marquee.ng-marquee-stop-on-hover:hover>span{-webkit-animation-play-state:paused;animation-play-state:paused}@-webkit-keyframes movement-smooth{from{transform:translateX(0);left:100%}to{transform:translateX(-100%);left:0}}@keyframes movement-smooth{from{transform:translateX(0);left:100%}to{transform:translateX(-100%);left:0}}@-webkit-keyframes movement-steps20{0%{transform:translateX(0);left:100%}5%,9.99%{transform:translateX(-5%);left:95%}10%,14.99%{transform:translateX(-10%);left:90%}15%,19.99%{transform:translateX(-15%);left:85%}20%,24.99%{transform:translateX(-20%);left:80%}25%,29.99%{transform:translateX(-25%);left:75%}30%,34.99%{transform:translateX(-30%);left:70%}35%,39.99%{transform:translateX(-35%);left:65%}40%,44.99%{transform:translateX(-40%);left:60%}45%,49.99%{transform:translateX(-45%);left:55%}50%,54.99%{transform:translateX(-50%);left:50%}55%,59.99%{transform:translateX(-55%);left:45%}60%,64.99%{transform:translateX(-60%);left:40%}65%,69.99%{transform:translateX(-65%);left:35%}70%,74.99%{transform:translateX(-70%);left:30%}75%,79.99%{transform:translateX(-75%);left:25%}80%,84.99%{transform:translateX(-80%);left:20%}85%,89.99%{transform:translateX(-85%);left:15%}90%,94.99%{transform:translateX(-90%);left:10%}95%,99.99%{transform:translateX(-95%);left:5%}100%{transform:translateX(-100%);left:0}}@keyframes movement-steps20{0%{transform:translateX(0);left:100%}5%,9.99%{transform:translateX(-5%);left:95%}10%,14.99%{transform:translateX(-10%);left:90%}15%,19.99%{transform:translateX(-15%);left:85%}20%,24.99%{transform:translateX(-20%);left:80%}25%,29.99%{transform:translateX(-25%);left:75%}30%,34.99%{transform:translateX(-30%);left:70%}35%,39.99%{transform:translateX(-35%);left:65%}40%,44.99%{transform:translateX(-40%);left:60%}45%,49.99%{transform:translateX(-45%);left:55%}50%,54.99%{transform:translateX(-50%);left:50%}55%,59.99%{transform:translateX(-55%);left:45%}60%,64.99%{transform:translateX(-60%);left:40%}65%,69.99%{transform:translateX(-65%);left:35%}70%,74.99%{transform:translateX(-70%);left:30%}75%,79.99%{transform:translateX(-75%);left:25%}80%,84.99%{transform:translateX(-80%);left:20%}85%,89.99%{transform:translateX(-85%);left:15%}90%,94.99%{transform:translateX(-90%);left:10%}95%,99.99%{transform:translateX(-95%);left:5%}100%{transform:translateX(-100%);left:0}}@-webkit-keyframes movement-steps10{0%{transform:translateX(0);left:100%}10%,19.99%{transform:translateX(-10%);left:90%}20%,29.99%{transform:translateX(-20%);left:80%}30%,39.99%{transform:translateX(-30%);left:70%}40%,49.99%{transform:translateX(-40%);left:60%}50%,59.99%{transform:translateX(-50%);left:50%}60%,69.99%{transform:translateX(-60%);left:40%}70%,79.99%{transform:translateX(-70%);left:30%}80%,89.99%{transform:translateX(-80%);left:20%}90%,99.99%{transform:translateX(-90%);left:10%}100%{transform:translateX(-100%);left:0}}@keyframes movement-steps10{0%{transform:translateX(0);left:100%}10%,19.99%{transform:translateX(-10%);left:90%}20%,29.99%{transform:translateX(-20%);left:80%}30%,39.99%{transform:translateX(-30%);left:70%}40%,49.99%{transform:translateX(-40%);left:60%}50%,59.99%{transform:translateX(-50%);left:50%}60%,69.99%{transform:translateX(-60%);left:40%}70%,79.99%{transform:translateX(-70%);left:30%}80%,89.99%{transform:translateX(-80%);left:20%}90%,99.99%{transform:translateX(-90%);left:10%}100%{transform:translateX(-100%);left:0}}@-webkit-keyframes movement-steps5{0%,19.99%{transform:translateX(0);left:100%}20%,39.99%{transform:translateX(-20%);left:80%}40%,59.99%{transform:translateX(-40%);left:60%}60%,79.99%{transform:translateX(-60%);left:40%}80%,99.99%{transform:translateX(-80%);left:20%}100%{transform:translateX(-100%);left:0}}@keyframes movement-steps5{0%,19.99%{transform:translateX(0);left:100%}20%,39.99%{transform:translateX(-20%);left:80%}40%,59.99%{transform:translateX(-40%);left:60%}60%,79.99%{transform:translateX(-60%);left:40%}80%,99.99%{transform:translateX(-80%);left:20%}100%{transform:translateX(-100%);left:0}}.ng-marquee.ng-marquee-movement-smooth>span{-webkit-animation-name:movement-smooth;animation-name:movement-smooth}.ng-marquee.ng-marquee-movement-steps20>span{-webkit-animation-name:movement-steps20;animation-name:movement-steps20}.ng-marquee.ng-marquee-movement-steps10>span{-webkit-animation-name:movement-steps10;animation-name:movement-steps10}.ng-marquee.ng-marquee-movement-steps5>span{-webkit-animation-name:movement-steps5;animation-name:movement-steps5}.ng-marquee.ng-marquee-direction-left>span,.ng-marquee.ng-marquee-direction-normal>span{-webkit-animation-direction:normal;animation-direction:normal}.ng-marquee.ng-marquee-direction-alternate>span{-webkit-animation-direction:alternate;animation-direction:alternate}.ng-marquee.ng-marquee-direction-reverse>span,.ng-marquee.ng-marquee-direction-right>span{animation-direction:reverse}.ng-marquee>span{content:attr(data-marquee);white-space:nowrap;position:relative;transform:translateX(-50%);display:inline-block;left:50%;-webkit-animation:10s linear infinite movement-smooth;animation:10s linear infinite movement-smooth}"]}]}],e.propDecorators={speed:[{type:t.Input}],duration:[{type:t.Input}],direction:[{type:t.Input}],stopOnHover:[{type:t.Input}]},e}();var o=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[a.CommonModule],declarations:[s],exports:[s]}]}],e}();e.NgMarqueeComponent=s,e.NgMarqueeModule=o,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-marquee.umd.min.js.map