Home >Web Front-end >JS Tutorial >Angular4 realizes 3d effect
This time I will bring you Angular4 to achieve 3d effects. What are the precautions for Angular4 to achieve 3d effects? The following is a practical case, let’s take a look.
What is Angular
Angular is a framework developed and maintained by Google for developing cross-platform applications, suitable for both mobile phones and desktops.What are the characteristics of Angular
Based on Angular we can build applications for all platforms. For example: Web applications, mobile Web applications, mobile applications and desktop applications, etc. Through Web Workers and server-side rendering (SSR), achieve the highest rendering speed achievable on today's web platforms. Angular gives you effective control over scalability. Based on RxJS, Immutable.js and other push models, it can adapt to massive data needs.What functions does Angular provide
Dynamic HTMLPowerful form system (template driven and model driven)
Powerful view engine
Event processingFast page rendering
Flexible routing
HTTP service
View encapsulation
AOT, Tree Shaking
Better componentization and code reuse
Better mobile support
Introduced RxJS and Observable
Introduced Zone.js to provide more intelligent change detection
Tell me, what is the difficulty in achieving this
If you write in native, everyone can write, but for people who are new to Angular, like me, I was completely confused when I decided to write. I can write in native, but if I write in Angular, I don’t know where to start. rise. . . Use the angular command to wrap this effect in a command. It will not be too convenient if you want to use it next time (add a command where needed and it will be OK), 1. Operate mouse events and pass parameters in angular instructions, 2. How to get the event object of the mouse operation object, the same as the native one 3. How to obtain and operate variousattributes of objects
I didn't know that when I made this. . . Check out the blog for information. . Only then did I know this was written@HostListener('mousemove') onMouseMove(para) {} @HostListener('mousemove') onMouseMove(para) { let e= para ||window.event; }
export class DirectivesDirective { constructor(private el: ElementRef) { } @HostListener('mousemove') onMouseMove(para) { let e= para ||window.event; let pTop = this.el.nativeElement.offsetTop; ... } }After understanding the basic structure above, you can achieve this effect. After all, the logic is the same. Post the code directly
import {Directive, ElementRef, HostListener} from '@angular/core'; @Directive({ selector: '[appDirectives]' }) export class DirectivesDirective { // public el; private distance = 50; private rotationMultiple = 0.1 constructor(private el: ElementRef) { this.distance = 50; this.rotationMultiple = 0.1 } @HostListener('mousemove') onMouseMove(para) { let e= para ||window.event; let pTop = this.el.nativeElement.offsetTop; let pLeft = this.el.nativeElement.offsetLeft; let pWidth = this.el.nativeElement.offsetWidth; let pHeight =this.el.nativeElement.offsetHeight; if(e.clientX < pWidth/2 && e.clientY > pHeight/2 || e.clientX > pWidth/2 && e.clientY > pHeight/2) { // 3.4 let pctX =(((e.clientX - pLeft)/ pWidth) - 0.5); let pctY = -(((e.clientY - pTop)/ pHeight) - 0.3); this.animate(pctX, pctY, this.rotationMultiple, this.distance); } if(e.clientX < pWidth/2 && e.clientY < pHeight/2 || e.clientX > pWidth/2 && e.clientY < pHeight/2) { // 1.2 let pctX =((e.clientX - pLeft)/ pWidth) - 0.7; let pctY = ((e.clientY - pTop)/ pHeight) - 0.5; this.animate(pctX, pctY, this.rotationMultiple, this.distance); } } private animate(pctX: number, pctY: number, rotationMultiple: number, distance: number) { let rotateX = pctY * rotationMultiple * -180; let rotateY = pctX * rotationMultiple * 180; this.el.nativeElement.style.transform = ' rotateX(' + rotateX + 'deg' + ')' + ' rotateY(' + rotateY + 'deg'+ ')'; } }I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website! Recommended reading:
Detailed explanation of the steps to implement select secondary linkage drop-down menu in AngularJS
How JS calculates the acquisition of objects Length
Bootstrap and Vue operations to add and delete user information
The above is the detailed content of Angular4 realizes 3d effect. For more information, please follow other related articles on the PHP Chinese website!