From 06bd75fb39850726828dccc00658d5f05b8e9002 Mon Sep 17 00:00:00 2001 From: AdamBtech <60339324+AdamBtech@users.noreply.github.com> Date: Sat, 24 May 2025 00:26:13 +0200 Subject: [PATCH] Added animation to tree node --- .../about-display.component.html | 2 +- .../neural-profile-tree.component.css | 119 ++++++++++++++++++ .../neural-profile-tree.component.html | 15 ++- .../neural-profile-tree.component.ts | 6 +- .../header-contact-links.component.spec.ts | 23 ---- 5 files changed, 133 insertions(+), 32 deletions(-) delete mode 100644 src/app/features/header-display/header-contact-links/header-contact-links.component.spec.ts diff --git a/src/app/features/about-display/about-display.component.html b/src/app/features/about-display/about-display.component.html index ff06b62..911b929 100644 --- a/src/app/features/about-display/about-display.component.html +++ b/src/app/features/about-display/about-display.component.html @@ -2,7 +2,7 @@
- +
diff --git a/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.css b/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.css index e69de29..c742adc 100644 --- a/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.css +++ b/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.css @@ -0,0 +1,119 @@ +/* NieR-style hover effects for tree nodes */ +.tree-node-item { + position: relative; + overflow: hidden; + transition: color 0.3s ease; + border-bottom: 1px solid transparent; +} + +/* Underline effect */ +.tree-node-item::before { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 0; + height: 1px; + background-color: var(--color-nier-text-dark); + transition: width 0.3s ease; + z-index: 0; +} + +/* Text color change on hover */ +.tree-node-item:hover { + color: var(--color-nier-text-dark); + border-bottom-color: var(--color-nier-text-dark); +} + +/* Underline animation on hover */ +.tree-node-item:hover::before { + width: 100%; +} + +/* Glitch effect on hover - target the text span directly */ +.tree-node-item:hover span.text-nier-dark { + animation: nier-text-glitch 0.6s ease; +} + +/* Alternative - target any span with text */ +.tree-node-item:hover span:last-of-type { + animation: nier-text-glitch 0.6s ease; +} + +/* Scan line for tree nodes */ +.tree-node-item .scan-line { + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 1px; + background-color: var(--color-nier-text-dark); + opacity: 0; + z-index: 3; + pointer-events: none; +} + +.tree-node-item:hover .scan-line { + animation: nier-button-scan 0.3s ease forwards; +} + +/* Text glitch animation for tree nodes */ +@keyframes nier-text-glitch { + 0%, 100% { + transform: translateX(0); + clip-path: inset(0 0 0 0); + } + 10% { + transform: translateX(-2px); + clip-path: inset(0 0 40% 0); + } + 15% { + transform: translateX(0); + } + 20% { + transform: translateX(1px); + clip-path: inset(40% 0 0 0); + } + 25% { + transform: translateX(0); + } + 30% { + transform: translateX(-1px); + clip-path: inset(20% 0 20% 0); + } + 35% { + transform: translateX(0); + } +} + +/* The scan line animation */ +@keyframes nier-button-scan { + 0% { + opacity: 0.5; + left: -100%; + } + 100% { + opacity: 0; + left: 100%; + } +} + +/* Active/click state for tree nodes */ +.tree-node-item:active { + transform: scale(0.98); +} + +/* Touch device optimization */ +@media (hover: none) { + .tree-node-item:active::before { + width: 100%; + } + + .tree-node-item:active .scan-line { + animation: nier-button-scan 0.3s ease forwards; + } + + .tree-node-item:active { + color: var(--color-nier-text-dark); + } +} diff --git a/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.html b/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.html index a9c44aa..fc725b3 100644 --- a/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.html +++ b/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.html @@ -1,4 +1,4 @@ -
+
@for (node of treeData(); track node.id) {
@@ -17,7 +19,7 @@ @@ -34,13 +36,16 @@ } - + {{ node.title }} + + +
} diff --git a/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.ts b/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.ts index e522a05..c37606b 100644 --- a/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.ts +++ b/src/app/features/about-display/neural-profile-tree/neural-profile-tree.component.ts @@ -17,7 +17,7 @@ export interface NeuralProfileNode { standalone: true, imports: [CommonModule], templateUrl: './neural-profile-tree.component.html', - styles: [], + styleUrl: './neural-profile-tree.component.css', }) export class NeuralProfileTreeComponent { // Input for external data (optional) @@ -32,8 +32,8 @@ export class NeuralProfileTreeComponent { private getInitialData(): NeuralProfileNode[] { return [ { - id: 'neuralProfile', - title: ':TECH_CORE ', + id: 'workstation', + title: 'Workstation/', isExpanded: true, isSelected: false, level: 0, diff --git a/src/app/features/header-display/header-contact-links/header-contact-links.component.spec.ts b/src/app/features/header-display/header-contact-links/header-contact-links.component.spec.ts deleted file mode 100644 index 6a3df31..0000000 --- a/src/app/features/header-display/header-contact-links/header-contact-links.component.spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { HeaderContactLinksComponent } from './header-contact-links.component'; - -describe('HeaderContactLinksComponent', () => { - let component: HeaderContactLinksComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - imports: [HeaderContactLinksComponent] - }) - .compileComponents(); - - fixture = TestBed.createComponent(HeaderContactLinksComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -});