Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated Enhanced scrolling text animation on the webpage by adding various effects, such as fading and scaling. #66

Closed
wants to merge 7 commits into from
Closed

Updated Enhanced scrolling text animation on the webpage by adding various effects, such as fading and scaling. #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b434685
Update index.html
anshumanat Oct 2, 2024
ecf7aa9
Update script.js
anshumanat Oct 2, 2024
4c81734
Update style.css
anshumanat Oct 2, 2024
f57899f
Merge branch 'main' into main
anshumanat Oct 4, 2024
fc1cea4
Merge branch 'main' into main
anshumanat Oct 5, 2024
7738a16
Merge branch 'main' into main
anshumanat Oct 6, 2024
11044fb
Merge branch 'main' into main
anshumanat Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ <h1>Welcome to GamingTools</h1>
<!-- PS4 Controller Section -->
<div class="row">
<div class="col-1">
<h2>PS4 V2 Dualshock 4</h2>
<h3>Wireless Controllers for PlayStation 4</h3>
<p>(Compatible/Generic)</p>
<h2 class="text-animated">PS4 V2 Dualshock 4</h2>
<h3 class="text-animated">Wireless Controllers for PlayStation 4</h3>
<p class="text-animated">(Compatible/Generic)</p>
<div class="price">
<span class="original-price">&#8377;5500</span>
<span class="discounted-price">&#8377;3999</span>
Expand Down Expand Up @@ -77,9 +77,9 @@ <h3>Wireless Controllers for PlayStation 4</h3>
<!-- Xbox Controller Section -->
<div class="row">
<div class="col-1">
<h2>Xbox Wireless Controller</h2>
<h3>Controllers for Xbox One and Series X</h3>
<p>(Official)</p>
<h2 class ="text-animated">Xbox Wireless Controller</h2>
<h3 class ="text-animated">Controllers for Xbox One and Series X</h3>
<p class = "text-animated">(Official)</p>
<div class="price">
<span class="original-price">&#8377;4500</span>
<span class="discounted-price">&#8377;3499</span>
Expand Down Expand Up @@ -108,9 +108,9 @@ <h3>Controllers for Xbox One and Series X</h3>
<!-- Nintendo Switch Controller Section -->
<div class="row">
<div class="col-1">
<h2>Nintendo Switch Pro Controller</h2>
<h3>Wireless Controllers for Nintendo Switch</h3>
<p>(Official)</p>
<h2 class = "text-animated">Nintendo Switch Pro Controller</h2>
<h3 class = "text-animated">Wireless Controllers for Nintendo Switch</h3>
<p class = "text-animated">(Official)</p>
<div class="price">
<span class="original-price">&#8377;6000</span>
<span class="discounted-price">&#8377;4999</span>
Expand Down Expand Up @@ -139,9 +139,9 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
<!-- Gaming Mouse Section -->
<div class="row">
<div class="col-1">
<h2>Logitech G502 Hero</h2>
<h3>High Performance Gaming Mouse</h3>
<p>(Wired)</p>
<h2 class = "text-animated">Logitech G502 Hero</h2>
<h3 class = "text-animated">High Performance Gaming Mouse</h3>
<p class = "text-animated">(Wired)</p>
<div class="price">
<span class="original-price">&#8377;4000</span>
<span class="discounted-price">&#8377;2999</span>
Expand Down Expand Up @@ -170,9 +170,9 @@ <h3>High Performance Gaming Mouse</h3>
<!-- Gaming Keyboard Section -->
<div class="row">
<div class="col-1">
<h2>Razer BlackWidow</h2>
<h3>Mechanical Gaming Keyboard</h3>
<p>(Wired)</p>
<h2 class = "text-animated">Razer BlackWidow</h2>
<h3 class = "text-animated">Mechanical Gaming Keyboard</h3>
<p class = "text-animated">(Wired)</p>
<div class="price">
<span class="original-price">&#8377;7000</span>
<span class="discounted-price">&#8377;5499</span>
Expand Down Expand Up @@ -201,9 +201,9 @@ <h3>Mechanical Gaming Keyboard</h3>
<!-- Gaming Headset Section -->
<div class="row">
<div class="col-1">
<h2>SteelSeries Arctis 7</h2>
<h3>Wireless Gaming Headset</h3>
<p>(Surround Sound)</p>
<h2 class = "text-animated">SteelSeries Arctis 7</h2>
<h3 class = "text-animated">Wireless Gaming Headset</h3>
<p class=" text-animated">(Surround Sound)</p>
<div class="price">
<span class="original-price">&#8377;12000</span>
<span class="discounted-price">&#8377;8999</span>
Expand Down Expand Up @@ -232,9 +232,9 @@ <h3>Wireless Gaming Headset</h3>
<!-- Gaming Chair Section -->
<div class="row">
<div class="col-1">
<h2>Secretlab Omega</h2>
<h3>Ergonomic Gaming Chair</h3>
<p>(Adjustable)</p>
<h2 class ="text-animated">Secretlab Omega</h2>
<h3 class ="text-animated">Ergonomic Gaming Chair</h3>
<p class = "text-animated">(Adjustable)</p>
<div class="price">
<span class="original-price">&#8377;30000</span>
<span class="discounted-price">&#8377;24999</span>
Expand Down
38 changes: 38 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,43 @@ function toggleMenu() {
}
}




document.addEventListener("DOMContentLoaded", function () {
const textElements = document.querySelectorAll('.text-animated');

const options = {
root: null,
rootMargin: '0px',
threshold: 0.1
};

const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
// Use a staggered effect for animation
setTimeout(() => {
if (index % 2 === 0) {
entry.target.classList.add('fadeIn'); // Apply fade-in animation
} else {
entry.target.classList.add('scaleIn'); // Apply scale animation
}
}, index * 200); // Delay for staggered effect

observer.unobserve(entry.target); // Stop observing after animation
} else {
entry.target.classList.remove('fadeIn', 'scaleIn'); // Remove classes when out of view
}
});
}, options);

textElements.forEach(textElement => {
observer.observe(textElement); // Observe each text element
});
});
=======
=======
document.addEventListener('DOMContentLoaded', () => {
console.log("Website loaded successfully!");
});
Expand All @@ -30,3 +67,4 @@ function scrollToTop() {
behavior: 'smooth'
});
}

86 changes: 86 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -714,6 +714,88 @@ button:hover img {
overflow: hidden;
transition: 0.5s;
}




/*updation for text animation
=====================================*/

/* Animation keyframes */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

/* Animation keyframes */
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}



body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: #f4f4f4;
overflow-x: hidden; /* Prevent horizontal scrolling */
}

@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes scaleIn {
0% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}

.text-animated {
opacity: 0; /* Initially hidden */
transition: opacity 0.5s; /* Smooth transition */
font-size: 2rem; /* Adjust font size */
margin: 20px; /* Spacing between elements */
padding: 10px; /* Padding for better appearance */
background: #fff; /* Background color for text */
border-radius: 8px; /* Rounded corners */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

.fadeIn {
animation: fadeIn 0.5s forwards; /* Trigger fadeIn animation */
}

.scaleIn {
animation: scaleIn 0.5s forwards; /* Trigger scaleIn animation */
}

}

.scroll-top {
Expand All @@ -732,6 +814,9 @@ button:hover img {
background: #ff6062;
}



=======
.hidden {
display: none;
}
Expand Down Expand Up @@ -783,3 +868,4 @@ button:hover img {
.search-bar button:hover {
background-color: #555;
}