Twip-Network/watch.twip-network.org
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
Richard Mikloš
2024-01-25 16:01:20 +01:00
parent e6afb0f776
commit 46f3aa5b79
2 changed files with 8 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
scripts/pages/user/main.js
View File

@@ -1,17 +1,8 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var headerText = document.getElementById('headerText');
var h1 = document.querySelector('.user-index-h1'); var h1 = document.querySelector('.user-index-h1');
var h2 = document.querySelector('.user-index-h2'); var h2 = document.querySelector('.user-index-h2');
// Calculate the fade-in effect based on the window width // Add the fade-in class to trigger the animation
var scrollFraction = window.innerWidth / window.innerWidth; h1.classList.add('fade-in');
var translateX = 20 * (1 - scrollFraction); h2.classList.add('fade-in');
var opacity = 1 - scrollFraction;
// Apply the fade-in effect to the elements
h1.style.transform = 'translateX(' + translateX + 'px)';
h1.style.opacity = opacity;
h2.style.transform = 'translateX(' + translateX + 'px)';
h2.style.opacity = opacity;
}); });

10
styles/pages/user/style.css
View File

@@ -27,12 +27,12 @@ body {
.user-index-h1, .user-index-h1,
.user-index-h2 { .user-index-h2 {
opacity: 0; /* Initially set opacity to 0 */ opacity: 0;
transform: translateX(-20px); /* Move elements outside the viewport to the left */ transform: translateX(-20px);
transition: opacity 0.8s ease, transform 0.8s ease; /* Apply transition effect */ transition: opacity 0.8s ease, transform 0.8s ease;
} }
.visible { .fade-in {
opacity: 1; opacity: 1;
transform: translateX(0); /* Move elements back to their original position */ transform: translateX(0);
} }