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

Animationen sind ganz toll und gar kein krampf :D

Browse Source
This commit is contained in:
klappstuhl24
2023-11-16 22:05:00 +01:00
parent 5d8d3f1f2f
commit a4e6cc4518
8 changed files with 95 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
@page "/"
@inject IJSRuntime JSRuntime
<div class="hero_area">
@@ -69,7 +69,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">
@@ -104,7 +104,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">
@@ -141,11 +141,22 @@
<!-- end about section -->
@code {
private ElementReference animatedAboutSection1;
private ElementReference animatedAboutSection2;
private List<ElementReference> animatedElements = new List<ElementReference>();
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
animatedElements.Add(animatedAboutSection1);
animatedElements.Add(animatedAboutSection2);
await JSRuntime.InvokeVoidAsync("initScrollAnimations", animatedElements);
}
}
}

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

@@ -27,6 +27,9 @@
</div>
<!-- explaining section -->
<div class="container">
<NavLink class="nav-item" href="wiefunktionierts" Match="NavLinkMatch.All">
<span class="nav-link">Erklärung</span>
</NavLink>
</div>

3
KIKunstKirstenKlöckner/Pages/_Host.cshtml
View File

@@ -42,6 +42,8 @@
<link href="css/style.css" rel="stylesheet" />
<!-- responsive style -->
<link href="css/responsive.css" rel="stylesheet" />
<!-- animations style -->
<link href="css/animations.css" rel="stylesheet" />
</head>
<body>
@@ -63,6 +65,7 @@
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/animator.js"></script>
</body>
</html>