Animationen sind ganz toll und gar kein krampf :D
This commit is contained in:
parent
5d8d3f1f2f
commit
a4e6cc4518
|
|
@ -7,7 +7,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "KIKunstKirstenKlöckner", "
|
|||
EndProject
|
||||
Project("{00D1A9C2-B5F0-4AF3-8072-F6C62B433612}") = "KiKunstDatenbank", "KiKunstDatenbank\KiKunstDatenbank.sqlproj", "{A19CD19A-FE5B-4D4E-896B-DCC43B45F734}"
|
||||
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
|
||||
Global
|
||||
GlobalSection(SolutionConfigurationPlatforms) = preSolution
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
|
|
@ -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();
|
||||
}
|
||||
Loading…
Reference in New Issue