changes
This commit is contained in:
parent
e6afb0f776
commit
46f3aa5b79
@ -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');
|
||||
});
|
||||
|
@ -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);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user