Gottfried
/
KI-Kunst-Kirsten-Kloeckner
1
0
Fork 0
Code Issues 13 Pull Requests Packages Projects 1 Releases Wiki Activity

Noch mehr super tolle Animationen die überhaupt gar kein Krebs waren zu implementieren und super toll aussehen und gar kein krebs waren zu implementieren :D

This commit is contained in:
klappstuhl24 2023-11-17 00:34:22 +01:00
parent 98810ad1fc
commit 8504d79a3d
8 changed files with 614 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
KIKunstKirstenKlöckner/Pages/Home.razor
View File

@ -2,8 +2,11 @@
@page "/"
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable
<div class="hero_area">
<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
<div class="hero_area hero-area-visible">
<!-- slider section -->
<section class="slider_section" style="background-image: url('images/118EinfacherFrieden2017.jpg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
@ -61,11 +64,13 @@
</section>
<!-- end slider section -->
</div>
<!-- explaining section -->
@* <!-- explaining section -->
<div class="container">
</div>
*@
<!-- about section -->
@ -138,16 +143,19 @@
</div>
</div>
</section>
<!-- end about section -->
</section>
@code {
private ElementReference animatedAboutSection1;
private ElementReference animatedAboutSection2;
private List<ElementReference> animatedElements = new List<ElementReference>();
private Func<Task> removeScrollListener;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
@ -155,8 +163,26 @@
animatedElements.Add(animatedAboutSection1);
animatedElements.Add(animatedAboutSection2);
removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
"initHeroAreaScrollAnimation"
);
await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
}
}
private bool isDisposed = false;
public async ValueTask DisposeAsync()
{
if (!isDisposed)
{
if (removeScrollListener != null)
{
await removeScrollListener.Invoke();
}
isDisposed = true;
}
}
}

50
KIKunstKirstenKlöckner/Pages/Kirsten.razor
View File

@ -1,8 +1,11 @@
@page "/kirstenkloeckner"
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable
<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
<div class="hero_area">
<div class="hero_area hero-area-visible">
<!-- slider section -->
<section class=" slider_section" style="background-image: url('images/36GefleckteKatze2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
@ -65,7 +68,7 @@
<!-- about section -->
<section class="about_section layout_padding">
<section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
<div class="container">
<div class="row">
<div class="col-md-6">
@ -102,7 +105,7 @@
</div>
</section>
<section class="about_section layout_padding">
<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
<div class="container">
<div class="row">
<div class="col-md-6">
@ -137,3 +140,44 @@
</div>
</section>
<!-- end about section -->
</section>
@code {
private ElementReference animatedAboutSection1;
private ElementReference animatedAboutSection2;
private List<ElementReference> animatedElements = new List<ElementReference>();
private Func<Task> removeScrollListener;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
animatedElements.Add(animatedAboutSection1);
animatedElements.Add(animatedAboutSection2);
removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
"initHeroAreaScrollAnimation"
);
await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
}
}
private bool isDisposed = false;
public async ValueTask DisposeAsync()
{
if (!isDisposed)
{
if (removeScrollListener != null)
{
await removeScrollListener.Invoke();
}
isDisposed = true;
}
}
}

52
KIKunstKirstenKlöckner/Pages/Projekt.razor
View File

@ -1,11 +1,14 @@
@page "/projekt"
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable
<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
<div class="hero_area">
<div class="hero_area hero-area-visible">
<!-- slider section -->
<section class=" slider_section ">
<section class="slider_section" style="background-image: url('images/3Umsatz2014.png'); background-size: cover; background-repeat: no-repeat;">
<div class="container">
<div class="row">
<div class="col-md-6 ">
@ -64,7 +67,7 @@
<!-- about section -->
<section class="about_section layout_padding">
<section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
<div class="container">
<div class="row">
<div class="col-md-6">
@ -100,7 +103,7 @@
</div>
</section>
<section class="about_section layout_padding">
<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
<div class="container">
<div class="row">
<div class="col-md-6">
@ -135,3 +138,44 @@
</div>
</section>
<!-- end about section -->
</section>
@code {
private ElementReference animatedAboutSection1;
private ElementReference animatedAboutSection2;
private List<ElementReference> animatedElements = new List<ElementReference>();
private Func<Task> removeScrollListener;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
animatedElements.Add(animatedAboutSection1);
animatedElements.Add(animatedAboutSection2);
removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
"initHeroAreaScrollAnimation"
);
await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
}
}
private bool isDisposed = false;
public async ValueTask DisposeAsync()
{
if (!isDisposed)
{
if (removeScrollListener != null)
{
await removeScrollListener.Invoke();
}
isDisposed = true;
}
}
}

58
KIKunstKirstenKlöckner/Pages/Wunschbilder.razor
View File

@ -1,8 +1,11 @@
@page "/wunschprogramm"
@inject IJSRuntime JSRuntime
@implements IAsyncDisposable
<section class="about_section" style="background-image: url('images/5KeineAngstvorFehlern2014.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:lighten">
<div class="hero_area">
<div class="hero_area hero-area-visible">
<!-- slider section -->
<section class="slider_section" style="background-image: url('images/3730Kilo2015.jpeg'); background-size: cover; background-repeat: no-repeat; background-blend-mode:hard-light ;">
@ -25,17 +28,9 @@
</section>
<!-- end slider section -->
</div>
<!-- explaining section -->
<div class="container">
<NavLink class="nav-item" href="wiefunktionierts" Match="NavLinkMatch.All">
<span class="nav-link">Erklärung</span>
</NavLink>
</div>
<!-- about section -->
<section class="about_section layout_padding">
<section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
<div class="container">
<div class="row">
<div class="col-md-6">
@ -70,7 +65,7 @@
</div>
</section>
<section class="about_section layout_padding">
<section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
<div class="container">
<div class="row">
<div class="col-md-6">
@ -106,3 +101,44 @@
</div>
</section>
<!-- end about section -->
</section>
@code {
private ElementReference animatedAboutSection1;
private ElementReference animatedAboutSection2;
private List<ElementReference> animatedElements = new List<ElementReference>();
private Func<Task> removeScrollListener;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
animatedElements.Add(animatedAboutSection1);
animatedElements.Add(animatedAboutSection2);
removeScrollListener = await JSRuntime.InvokeAsync<Func<Task>>(
"initHeroAreaScrollAnimation"
);
await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
}
}
private bool isDisposed = false;
public async ValueTask DisposeAsync()
{
if (!isDisposed)
{
if (removeScrollListener != null)
{
await removeScrollListener.Invoke();
}
isDisposed = true;
}
}
}

3
KIKunstKirstenKlöckner/Shared/MainLayout.razor
View File

@ -35,6 +35,9 @@
<NavLink class="nav-item" href="kirstenkloeckner" Match="NavLinkMatch.All">
<span class="nav-link">Kirsten</span>
</NavLink>
<NavLink class="nav-item" href="projekt" Match="NavLinkMatch.All">
<span class="nav-link">Projekt</span>
</NavLink>
<NavLink class="nav-item" href="gallery" Match="NavLinkMatch.All">
<span class="nav-link">Galerie</span>
</NavLink>

11
KIKunstKirstenKlöckner/wwwroot/css/animations.css
View File

@ -50,3 +50,14 @@
opacity: 1;
}
.hero-area-visible {
opacity: 1;
transform: translateY(0);
transition: opacity 0.5s ease-in-out;
}
.hero-area-hidden {
opacity: 0;
transform: translateY(-100%);
transition: opacity 0.3s ease-in-out, transform 0.8s ease-in-out;
}

27
KIKunstKirstenKlöckner/wwwroot/js/animator.js
View File

@ -17,9 +17,36 @@
animateElements();
}
function scrollToElement(elementId) {
var element = document.getElementById(elementId);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}
function initHeroAreaScrollAnimation(scrollToElementId) {
const heroArea = document.querySelector('.hero_area');
const heroAreaHeight = heroArea.offsetHeight;
const threshold = heroAreaHeight / 1.75;
function onScroll() {
if (window.scrollY > threshold) {
heroArea.classList.remove('hero-area-visible');
heroArea.classList.add('hero-area-hidden');
} else {
heroArea.classList.remove('hero-area-hidden');
heroArea.classList.add('hero-area-visible');
}
}
window.addEventListener('scroll', onScroll);
// Rückgabe einer Funktion zum Entfernen des Event-Listeners
return () => {
window.removeEventListener('scroll', onScroll);
};
}