ngx-flip-card
Version:
Angular component to animate a double-sided card.
75 lines • 10.6 kB
JavaScript
import { Component, HostListener, Input, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
export class NgxTiltCardComponent {
constructor() {
this.xRot = 0;
this.yRot = 0;
this.rotationDegreesX = 5;
this.rotationDegreesY = 5;
this.xRotationMatrix = [];
this.yRotationMatrix = [];
}
onMouseOut() {
this.xRot = 0;
this.yRot = 0;
}
onMouseMove(event) {
let index = event.offsetY / this.tiltContentRef.nativeElement.offsetHeight;
index = Math.floor(index * 5);
index = index > this.xRotationMatrix.length - 1 ? this.xRotationMatrix.length - 1 : index;
if (index < this.xRotationMatrix.length && this.xRot !== this.xRotationMatrix[index]) {
this.xRot = this.xRotationMatrix[index];
}
else if (index >= this.xRotationMatrix.length) {
this.xRot = 0;
this.yRot = 0;
return;
}
index = event.offsetX / this.tiltContentRef.nativeElement.offsetWidth;
index = Math.floor(index * 5);
if (index < this.yRotationMatrix.length && this.yRot !== this.yRotationMatrix[index]) {
this.yRot = this.yRotationMatrix[index];
}
else if (index >= this.yRotationMatrix.length) {
this.xRot = 0;
this.yRot = 0;
}
}
ngOnInit() {
this.xRotationMatrix = [
this.rotationDegreesX,
this.rotationDegreesX / 2,
0,
(this.rotationDegreesX * -1) / 2,
this.rotationDegreesX * -1
];
this.yRotationMatrix = [
this.rotationDegreesY * -1,
(this.rotationDegreesY * -1) / 2,
0,
this.rotationDegreesY / 2,
this.rotationDegreesY
];
}
}
NgxTiltCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxTiltCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NgxTiltCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxTiltCardComponent, selector: "ngx-tilt-card", inputs: { rotationDegreesX: "rotationDegreesX", rotationDegreesY: "rotationDegreesY" }, host: { listeners: { "mouseout": "onMouseOut()", "mousemove": "onMouseMove($event)" } }, viewQueries: [{ propertyName: "tiltContentRef", first: true, predicate: ["tilt"], descendants: true }], ngImport: i0, template: "<div class=\"tilt-container\">\n <div #tilt class=\"tilt-content\" [ngStyle]=\"{'transform': 'rotateX(' + xRot + 'deg) rotateY(' + yRot + 'deg)'}\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tilt-container{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;position:relative;perspective:500px;width:-moz-fit-content;width:fit-content}.tilt-content{transform-origin:center;position:relative;transition:transform 1s ease}\n"], directives: [{ type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxTiltCardComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-tilt-card', template: "<div class=\"tilt-container\">\n <div #tilt class=\"tilt-content\" [ngStyle]=\"{'transform': 'rotateX(' + xRot + 'deg) rotateY(' + yRot + 'deg)'}\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [".tilt-container{display:grid;grid-template-columns:1fr;grid-template-rows:1fr;position:relative;perspective:500px;width:-moz-fit-content;width:fit-content}.tilt-content{transform-origin:center;position:relative;transition:transform 1s ease}\n"] }]
}], ctorParameters: function () { return []; }, propDecorators: { onMouseOut: [{
type: HostListener,
args: ['mouseout']
}], onMouseMove: [{
type: HostListener,
args: ['mousemove', ['$event']]
}], tiltContentRef: [{
type: ViewChild,
args: ['tilt']
}], rotationDegreesX: [{
type: Input
}], rotationDegreesY: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LXRpbHQtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtZmxpcC1jYXJkL3NyYy9saWIvbmd4LXRpbHQtY2FyZC9uZ3gtdGlsdC1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1mbGlwLWNhcmQvc3JjL2xpYi9uZ3gtdGlsdC1jYXJkL25neC10aWx0LWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsS0FBSyxFQUFVLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBTzlGLE1BQU0sT0FBTyxvQkFBb0I7SUF3Qy9CO1FBVEEsU0FBSSxHQUFXLENBQUMsQ0FBQztRQUNqQixTQUFJLEdBQVcsQ0FBQyxDQUFDO1FBRVIscUJBQWdCLEdBQVcsQ0FBQyxDQUFDO1FBQzdCLHFCQUFnQixHQUFXLENBQUMsQ0FBQztRQUU5QixvQkFBZSxHQUFhLEVBQUUsQ0FBQztRQUMvQixvQkFBZSxHQUFhLEVBQUUsQ0FBQztJQUV2QixDQUFDO0lBdENTLFVBQVU7UUFDbEMsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUM7UUFDZCxJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQztJQUNoQixDQUFDO0lBRXNDLFdBQVcsQ0FBQyxLQUFpQjtRQUNsRSxJQUFJLEtBQUssR0FBRyxLQUFLLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsYUFBYSxDQUFDLFlBQVksQ0FBQztRQUMzRSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDOUIsS0FBSyxHQUFHLEtBQUssR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLE1BQU0sR0FBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO1FBQ3pGLElBQUcsS0FBSyxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssSUFBSSxDQUFDLGVBQWUsQ0FBQyxLQUFLLENBQUMsRUFBQztZQUNsRixJQUFJLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDekM7YUFBTSxJQUFHLEtBQUssSUFBSSxJQUFJLENBQUMsZUFBZSxDQUFDLE1BQU0sRUFBQztZQUM3QyxJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQztZQUNkLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDO1lBQ2QsT0FBTztTQUNSO1FBRUQsS0FBSyxHQUFHLEtBQUssQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxhQUFhLENBQUMsV0FBVyxDQUFDO1FBQ3RFLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUMsQ0FBQztRQUM5QixJQUFHLEtBQUssR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLE1BQU0sSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxlQUFlLENBQUMsS0FBSyxDQUFDLEVBQUM7WUFDbEYsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUMsZUFBZSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ3pDO2FBQU0sSUFBRyxLQUFLLElBQUksSUFBSSxDQUFDLGVBQWUsQ0FBQyxNQUFNLEVBQUM7WUFDN0MsSUFBSSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUM7WUFDZCxJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQztTQUNmO0lBQ0gsQ0FBQztJQWVELFFBQVE7UUFDTixJQUFJLENBQUMsZUFBZSxHQUFHO1lBQ3JCLElBQUksQ0FBQyxnQkFBZ0I7WUFDckIsSUFBSSxDQUFDLGdCQUFnQixHQUFHLENBQUM7WUFDekIsQ0FBQztZQUNELENBQUMsSUFBSSxDQUFDLGdCQUFnQixHQUFHLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQztZQUNoQyxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsQ0FBQyxDQUFDO1NBQzNCLENBQUM7UUFFRixJQUFJLENBQUMsZUFBZSxHQUFHO1lBQ3JCLElBQUksQ0FBQyxnQkFBZ0IsR0FBRyxDQUFDLENBQUM7WUFDMUIsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDO1lBQ2hDLENBQUM7WUFDRCxJQUFJLENBQUMsZ0JBQWdCLEdBQUcsQ0FBQztZQUN6QixJQUFJLENBQUMsZ0JBQWdCO1NBQ3RCLENBQUM7SUFDSixDQUFDOztrSEExRFUsb0JBQW9CO3NHQUFwQixvQkFBb0IsOFVDUGpDLGtOQUtBOzRGREVhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxlQUFlOzBFQU1DLFVBQVU7c0JBQW5DLFlBQVk7dUJBQUMsVUFBVTtnQkFLZSxXQUFXO3NCQUFqRCxZQUFZO3VCQUFDLFdBQVcsRUFBRSxDQUFDLFFBQVEsQ0FBQztnQkFzQmxCLGNBQWM7c0JBQWhDLFNBQVM7dUJBQUMsTUFBTTtnQkFLUixnQkFBZ0I7c0JBQXhCLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBIb3N0TGlzdGVuZXIsIElucHV0LCBPbkluaXQsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtdGlsdC1jYXJkJyxcbiAgdGVtcGxhdGVVcmw6ICcuL25neC10aWx0LWNhcmQuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9uZ3gtdGlsdC1jYXJkLmNvbXBvbmVudC5jc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBOZ3hUaWx0Q2FyZENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQEhvc3RMaXN0ZW5lcignbW91c2VvdXQnKSBvbk1vdXNlT3V0KCkge1xuICAgIHRoaXMueFJvdCA9IDA7XG4gICAgdGhpcy55Um90ID0gMDtcbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlbW92ZScsIFsnJGV2ZW50J10pIG9uTW91c2VNb3ZlKGV2ZW50OiBNb3VzZUV2ZW50KSB7XG4gICAgbGV0IGluZGV4ID0gZXZlbnQub2Zmc2V0WSAvIHRoaXMudGlsdENvbnRlbnRSZWYubmF0aXZlRWxlbWVudC5vZmZzZXRIZWlnaHQ7XG4gICAgaW5kZXggPSBNYXRoLmZsb29yKGluZGV4ICogNSk7XG4gICAgaW5kZXggPSBpbmRleCA+IHRoaXMueFJvdGF0aW9uTWF0cml4Lmxlbmd0aCAtMSA/IHRoaXMueFJvdGF0aW9uTWF0cml4Lmxlbmd0aCAtIDEgOiBpbmRleDtcbiAgICBpZihpbmRleCA8IHRoaXMueFJvdGF0aW9uTWF0cml4Lmxlbmd0aCAmJiB0aGlzLnhSb3QgIT09IHRoaXMueFJvdGF0aW9uTWF0cml4W2luZGV4XSl7XG4gICAgICB0aGlzLnhSb3QgPSB0aGlzLnhSb3RhdGlvbk1hdHJpeFtpbmRleF07XG4gICAgfSBlbHNlIGlmKGluZGV4ID49IHRoaXMueFJvdGF0aW9uTWF0cml4Lmxlbmd0aCl7XG4gICAgICB0aGlzLnhSb3QgPSAwO1xuICAgICAgdGhpcy55Um90ID0gMDtcbiAgICAgIHJldHVybjtcbiAgICB9XG5cbiAgICBpbmRleCA9IGV2ZW50Lm9mZnNldFggLyB0aGlzLnRpbHRDb250ZW50UmVmLm5hdGl2ZUVsZW1lbnQub2Zmc2V0V2lkdGg7XG4gICAgaW5kZXggPSBNYXRoLmZsb29yKGluZGV4ICogNSk7XG4gICAgaWYoaW5kZXggPCB0aGlzLnlSb3RhdGlvbk1hdHJpeC5sZW5ndGggJiYgdGhpcy55Um90ICE9PSB0aGlzLnlSb3RhdGlvbk1hdHJpeFtpbmRleF0pe1xuICAgICAgdGhpcy55Um90ID0gdGhpcy55Um90YXRpb25NYXRyaXhbaW5kZXhdO1xuICAgIH0gZWxzZSBpZihpbmRleCA+PSB0aGlzLnlSb3RhdGlvbk1hdHJpeC5sZW5ndGgpe1xuICAgICAgdGhpcy54Um90ID0gMDtcbiAgICAgIHRoaXMueVJvdCA9IDA7XG4gICAgfVxuICB9XG5cbiAgQFZpZXdDaGlsZCgndGlsdCcpIHRpbHRDb250ZW50UmVmITogRWxlbWVudFJlZjtcblxuICB4Um90OiBudW1iZXIgPSAwO1xuICB5Um90OiBudW1iZXIgPSAwO1xuXG4gIEBJbnB1dCgpIHJvdGF0aW9uRGVncmVlc1g6IG51bWJlciA9IDU7XG4gIEBJbnB1dCgpIHJvdGF0aW9uRGVncmVlc1k6IG51bWJlciA9IDU7XG5cbiAgcHJpdmF0ZSB4Um90YXRpb25NYXRyaXg6IG51bWJlcltdID0gW107XG4gIHByaXZhdGUgeVJvdGF0aW9uTWF0cml4OiBudW1iZXJbXSA9IFtdO1xuXG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gICAgdGhpcy54Um90YXRpb25NYXRyaXggPSBbXG4gICAgICB0aGlzLnJvdGF0aW9uRGVncmVlc1gsXG4gICAgICB0aGlzLnJvdGF0aW9uRGVncmVlc1ggLyAyLFxuICAgICAgMCxcbiAgICAgICh0aGlzLnJvdGF0aW9uRGVncmVlc1ggKiAtMSkgLyAyLFxuICAgICAgdGhpcy5yb3RhdGlvbkRlZ3JlZXNYICogLTFcbiAgICBdO1xuXG4gICAgdGhpcy55Um90YXRpb25NYXRyaXggPSBbXG4gICAgICB0aGlzLnJvdGF0aW9uRGVncmVlc1kgKiAtMSxcbiAgICAgICh0aGlzLnJvdGF0aW9uRGVncmVlc1kgKiAtMSkgLyAyLFxuICAgICAgMCxcbiAgICAgIHRoaXMucm90YXRpb25EZWdyZWVzWSAvIDIsXG4gICAgICB0aGlzLnJvdGF0aW9uRGVncmVlc1lcbiAgICBdO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwidGlsdC1jb250YWluZXJcIj5cbiAgICA8ZGl2ICN0aWx0IGNsYXNzPVwidGlsdC1jb250ZW50XCIgW25nU3R5bGVdPVwieyd0cmFuc2Zvcm0nOiAncm90YXRlWCgnICsgeFJvdCArICdkZWcpIHJvdGF0ZVkoJyArIHlSb3QgKyAnZGVnKSd9XCI+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbjwvZGl2PlxuIl19