54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { AfterViewInit, Component } from '@angular/core';
|
|
import { RouterOutlet } from '@angular/router';
|
|
import { HeaderComponent } from './header/header.component';
|
|
import { AboutComponent } from './about/about.component';
|
|
import { ContactComponent } from './contact/contact.component';
|
|
import { ProjectsComponent } from './projects/projects.component';
|
|
import { SkillsComponent } from './skills/skills.component';
|
|
|
|
@Component({
|
|
selector: 'app-root',
|
|
imports: [HeaderComponent, AboutComponent, ContactComponent, ProjectsComponent, SkillsComponent],
|
|
templateUrl: './app.component.html',
|
|
styleUrl: './app.component.scss'
|
|
})
|
|
export class AppComponent implements AfterViewInit {
|
|
title = 'portfolio';
|
|
|
|
|
|
ngAfterViewInit(): void {
|
|
this.observeProjects();
|
|
}
|
|
|
|
/** Watches for elements tagged with a fade-in animation when the user scrolls by them */
|
|
observeProjects() {
|
|
let projectItems: any[] = [];
|
|
const ups = document.querySelectorAll('.fade-in-up');
|
|
const lefts = document.querySelectorAll('.fade-in-left');
|
|
projectItems = projectItems.concat(ups);
|
|
projectItems = [...ups, ...lefts];
|
|
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
if (entry.target.classList.contains("fade-in-up")){
|
|
entry.target.classList.add('fade-in-up-ani');
|
|
entry.target.classList.remove('fade-in-up'); // Tp get rid of the opacity 0, conflicts with the scale animation
|
|
}
|
|
if (entry.target.classList.contains("fade-in-left")){
|
|
entry.target.classList.add('fade-in-left-ani');
|
|
entry.target.classList.remove('fade-in-left'); // Tp get rid of the opacity 0, conflicts with the scale animation
|
|
}
|
|
observer.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, {
|
|
threshold: 0.2,
|
|
});
|
|
|
|
projectItems.forEach(item => {
|
|
observer.observe(item);
|
|
});
|
|
}
|
|
}
|