77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
import {Component} from "@angular/core";
|
|
import {animate, state, style, transition, trigger} from "@angular/animations";
|
|
|
|
@Component({
|
|
selector: 'home',
|
|
templateUrl: 'home.component.html',
|
|
styleUrls: ['home.component.css'],
|
|
animations: [
|
|
trigger('1', [
|
|
state('1', style({
|
|
transform: 'translate(-50%, -50%)'
|
|
})),
|
|
state('2', style({
|
|
transform: 'translate(-50%, -250%)'
|
|
})),
|
|
state('3', style({
|
|
transform: 'translate(-50%, -450%)'
|
|
})),
|
|
transition('* => *', [
|
|
animate('1s')
|
|
])
|
|
]),
|
|
trigger('2', [
|
|
state('1', style({
|
|
transform: 'translate(-50%, 150%)'
|
|
})),
|
|
state('2', style({
|
|
transform: 'translate(-50%, -50%)'
|
|
})),
|
|
state('3', style({
|
|
transform: 'translate(-50%, -250%)'
|
|
})),
|
|
transition('* => *', [
|
|
animate('1s')
|
|
])
|
|
]),
|
|
trigger('3', [
|
|
state('1', style({
|
|
transform: 'translate(-50%, 250%)'
|
|
})),
|
|
state('2', style({
|
|
transform: 'translate(-50%, 150%)'
|
|
})),
|
|
state('3', style({
|
|
transform: 'translate(-50%, -50%)'
|
|
})),
|
|
transition('* => *', [
|
|
animate('1s')
|
|
])
|
|
])
|
|
]
|
|
})
|
|
export class HomeComponent {
|
|
|
|
public animate: boolean = false;
|
|
public slide = 1;
|
|
|
|
onWheel(event) {
|
|
if (!this.animate) {
|
|
this.animate = true;
|
|
if (event.deltaY > 0 && (this.slide < 3)) {
|
|
this.slide++;
|
|
setTimeout(() => {
|
|
this.animate = false;
|
|
}, 1000);
|
|
} else if (event.deltaY < 0 && (this.slide !== 1)) {
|
|
this.slide--;
|
|
setTimeout(() => {
|
|
this.animate = false;
|
|
}, 1000);
|
|
} else {
|
|
this.animate = false;
|
|
}
|
|
}
|
|
}
|
|
}
|