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 () {
var headerText = document.getElementById('headerText');
var h1 = document.querySelector('.user-index-h1');
var h2 = document.querySelector('.user-index-h2');
// Calculate the fade-in effect based on the window width
var scrollFraction = window.innerWidth / window.innerWidth;
var translateX = 20 * (1 - scrollFraction);
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;
// Add the fade-in class to trigger the animation
h1.classList.add('fade-in');
h2.classList.add('fade-in');
});

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

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