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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
KIKunstKirstenKlöckner.sln
View File

@ -7,7 +7,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "KIKunstKirstenKlöckner", "
EndProject EndProject
Project("{00D1A9C2-B5F0-4AF3-8072-F6C62B433612}") = "KiKunstDatenbank", "KiKunstDatenbank\KiKunstDatenbank.sqlproj", "{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}" Project("{00D1A9C2-B5F0-4AF3-8072-F6C62B433612}") = "KiKunstDatenbank", "KiKunstDatenbank\KiKunstDatenbank.sqlproj", "{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}"
EndProject EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}" Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "DataAccess", "DataAccess\DataAccess.csproj", "{0880FD07-236B-42C1-9CA3-2A6F695A623C}"
EndProject EndProject
Global Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution GlobalSection(SolutionConfigurationPlatforms) = preSolution

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

@ -1,7 +1,7 @@
 
@page "/" @page "/"
@inject IJSRuntime JSRuntime
<div class="hero_area"> <div class="hero_area">
@ -69,7 +69,7 @@
<!-- about section --> <!-- about section -->
<section class="about_section layout_padding"> <section class="about_section layout_padding section-animate-left" @ref="animatedAboutSection1">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
@ -104,7 +104,7 @@
</div> </div>
</section> </section>
<section class="about_section layout_padding"> <section class="about_section layout_padding section-animate-right" @ref="animatedAboutSection2">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
@ -141,11 +141,22 @@
<!-- end about section --> <!-- 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> </div>
<!-- explaining section --> <!-- explaining section -->
<div class="container"> <div class="container">
<NavLink class="nav-item" href="wiefunktionierts" Match="NavLinkMatch.All">
<span class="nav-link">Erklärung</span>
</NavLink>
</div> </div>

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

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

52
KIKunstKirstenKlöckner/wwwroot/css/animations.css 100644
View File

@ -0,0 +1,52 @@
.text-animate {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.text-animate.visible {
opacity: 1;
}
.image-animate-left {
position: relative;
opacity: 0;
left: -100%;
transition: left 2s ease-in-out, opacity 2s ease-in-out;
}
.image-animate-left.visible {
left: 50%;
transform: translateX(-50%);
opacity: 1;
}
.section-animate-left {
width: 100% margin-left: auto;
margin-right: auto;
opacity: 0;
left: -100%;
transition: left 1.2s ease-in-out, opacity 2s ease-in-out;
position: relative;
}
.section-animate-left.visible {
left: 50%;
transform: translateX(-50%);
opacity: 1;
}
.section-animate-right {
width: 100%;
margin-left: auto;
margin-right: auto;
opacity: 0;
transform: translateX(100%);
transition: transform 1.2s ease-in-out, opacity 2s ease-in-out;
position: relative;
}
.section-animate-right.visible {
transform: translateX(0%);
opacity: 1;
}

BIN
KIKunstKirstenKlöckner/wwwroot/images/3Umsatz2014.png 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

BIN
KIKunstKirstenKlöckner/wwwroot/images/circuitkkkk.jpg 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 KiB

19
KIKunstKirstenKlöckner/wwwroot/js/animator.js 100644
View File

@ -0,0 +1,19 @@
function initScrollAnimations(elements) {
function checkVisibility(element) {
const rect = element.getBoundingClientRect();
return rect.top < window.innerHeight && rect.bottom >= 0;
}
function animateElements() {
elements.forEach(element => {
if (checkVisibility(element)) {
element.classList.add('visible');
}
});
}
window.addEventListener('scroll', animateElements);
// Initialer Aufruf für den Fall, dass Elemente bereits sichtbar sind
animateElements();
}