Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Update carousel to include opacity animation

Browse Source 
Refactored slide navigation to integrate smooth fade animations using opacity changes. Introduced `carouselOpacity` and `triggerAnimation` to manage animation state, and replaced direct slide index changes with the `setSlide` method for improved modularity. Updated HTML and SCSS to support the new animation behavior.
This commit is contained in:
Teriuihi 2025-04-06 00:03:35 +02:00
parent 6f3445dc01
commit 849f09d10a
3 changed files with 27 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/app/home/home.component.html
View File

@ -114,10 +114,13 @@
<div class="sliderWrapper">
<div class="sliderContent">
<div class="indexSlider">
<div id="go-left" (click)="previousSlide()" class="circleBehind goLeft"></div><!-- show prev image -->
<div id="go-right" (click)="nextSlide()" class="circleBehind goRight"></div><!-- show next image -->
<div id="go-left" (click)="previousSlide()" class="circleBehind goLeft"></div>
<div id="go-right" (click)="nextSlide()" class="circleBehind goRight"></div>
<div class="display">
<span class="slide" [style.background-image]="'url(' + slide + ')'" [style.display]="'block'"></span>
<span class="slide"
[style.background-image]="'url(' + slide + ')'"
[style.opacity]="carouselOpacity"
[style.display]="'block'"></span>
</div>
</div>
<div class="dots">

4
frontend/src/app/home/home.component.scss
View File

@ -216,10 +216,6 @@ main .container {
border-radius: 5px;
}
.display > span {
animation: fadein 1.5s;
}
.display > span {
width: 700px;
height: 400px;

24
frontend/src/app/home/home.component.ts
View File

@ -21,6 +21,8 @@ export class HomeComponent implements OnInit {
];
private slideIndex = 0;
public carouselOpacity = 1;
public triggerAnimation = false;
ngOnInit(): void {
this.titleService.setTitle('Survival Minecraft Server on ' + ALTITUDE_VERSION + ' | Altitude Community');
@ -44,14 +46,14 @@ export class HomeComponent implements OnInit {
public previousSlide(): void {
if (this.slideIndex > 0) {
this.slideIndex--;
this.setSlide(this.slideIndex - 1);
} else {
this.slideIndex = this.slides.length - 1;
this.setSlide(this.slides.length - 1);
}
}
public nextSlide(): void {
this.slideIndex = (this.slideIndex + 1) % this.slides.length;
this.setSlide((this.slideIndex + 1) % this.slides.length);
}
public getSlideIndices(): number[] {
@ -60,6 +62,22 @@ export class HomeComponent implements OnInit {
public setSlide(slide: number): void {
this.slideIndex = slide;
this.triggerAnimation = true
this.carouselOpacity = 0;
const startTime = Date.now();
const duration = 1500;
const animate = () => {
const elapsed = Date.now() - startTime;
this.carouselOpacity = Math.min(elapsed / duration, 1);
if (this.carouselOpacity < 1) {
requestAnimationFrame(animate);
}
};
requestAnimationFrame(animate);
}
public getDotClass(slide: number): string {