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

Adding Animations effect in hole Project #652

Merged
merged 2 commits into from
Nov 6, 2024
Merged

Adding Animations effect in hole Project #652

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f22c824
Adding Animations effect.
13Sharad Oct 22, 2024
3f93ae0
Enhanced Loader Styling
13Sharad Oct 24, 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
88 changes: 73 additions & 15 deletions Loader/Loader.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,102 @@
/* Enhanced Loader Styling */
.loader {
width: 120px; /* Adjust size */
height: 120px; /* Adjust size */
position: fixed; /* Stay fixed in the center */
width: 100px;
height: 100px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999;
border: 10px solid rgba(0, 0, 0, 0.1);
border-top: 10px solid #3498db; /* Main color for the loader */
border-radius: 50%;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Enhanced shadow for depth */
animation: spin 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; /* Smoother, slower animation */
}

/* Main content styling */
/* Adding a glowing pulse effect to the loader */
.loader::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
background: radial-gradient(circle, #f39c12 0%, #e8491d 100%); /* Dynamic gradient */
border-radius: 50%;
transform: translate(-50%, -50%) scale(0.8);
box-shadow: 0 0 20px rgba(255, 105, 180, 0.6), 0 0 40px rgba(255, 105, 180, 0.4); /* Soft glow */
animation: pulsate 1.2s ease-in-out infinite, colorChange 3s ease-in-out infinite; /* Add color change effect */
}

/* Main content styling remains the same */
.main-content {
display: none;
opacity: 0;
transition: opacity 0.5s ease;
}

/* Show content when page is loaded */
/* Hide loader and show content when the page is loaded */
body.loaded .loader {
display: none; /* Hide loader */
display: none;
}

body.loaded .main-content {
display: block; /* Show main content */
animation: fadeIn 1s ease-in-out forwards; /* Fade in animation */
}

body.loaded .popup {
display: flex; /* Show popup after loading */
display: block;
animation: fadeIn 1s ease-in-out forwards;
}

/* Smooth fade-in effect for content */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

/* Body styling to prevent scrolling while the loader is visible */
/* Spin animation for loader */
@keyframes spin {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}

/* Pulsating animation for inner circle */
@keyframes pulsate {
0% {
transform: translate(-50%, -50%) scale(0.8);
}
50% {
transform: translate(-50%, -50%) scale(1.1); /* Slightly bigger pulsate */
}
100% {
transform: translate(-50%, -50%) scale(0.8);
}
}

/* Color change animation */
@keyframes colorChange {
0% {
background: radial-gradient(circle, #f39c12 0%, #e8491d 100%);
}
50% {
background: radial-gradient(circle, #8e44ad 0%, #3498db 100%);
}
100% {
background: radial-gradient(circle, #f39c12 0%, #e8491d 100%);
}
}

/* Prevent scrolling while the loader is visible */
body {
margin: 0;
padding: 0;
overflow: hidden; /* Prevent scrolling while loader is visible */
overflow: hidden;
background-color: #f0f4f8;
}
transition: background-color 0.5s ease;
}
20 changes: 14 additions & 6 deletions aboutus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
margin: 0;
padding: 0;
background-color: white;

transition: background-color 0.5s ease; /* Smooth transition for background color */
}

.container {
Expand All @@ -49,11 +49,13 @@
h1{
color: rgb(255, 255, 255);
text-align: center;
transition: transform 0.3s ease-in-out;
/* transition: transform 0.3s ease-in-out; */
transition: transform 0.3s ease-in-out, color 0.3s ease; /* Added color transition */
}

h1:hover {
transform: scale(1.2);
color: #f4be0c; /* Change color on hover for visual feedback */
}

h2{
Expand All @@ -75,11 +77,15 @@
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
text-align: center;
position: relative; /* Positioning context for hover effects */
overflow: hidden; /* Prevents overflow for scaling effects */
}

.feature:hover {
transform: translateX(-5px);
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15);
/* transform: translateX(-5px); */
transform: translateY(-5px); /* Smooth upward shift */
/* box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.15); */
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

.feature h3 {
Expand All @@ -96,7 +102,8 @@
font-size: 48px;
color: #e8491d;
margin-bottom: 15px;
transition: all 0.3s ease;
/* transition: all 0.3s ease; */
transition: transform 0.3s ease; /* Smooth scaling */
}

.feature:hover .feature-icon {
Expand All @@ -110,6 +117,7 @@
font-size: 18px;
color: #d0c3df;
font-weight: 600;
transition: color 0.3s ease; /* Smooth color transition */
}

.rocket {
Expand Down Expand Up @@ -283,7 +291,7 @@ <h3>FAQs Section</h3>
<div class="footer-content">
<div class="footer-section about">
<div class="logo-container">
<img src="images/logo.png" alt="GamingTools Logo" class="footer-logo">
<img src="images/logo.png" alt="GamingTools Logo" class="footer-logo" loading="lazy">
<h2 class="logo-text">Collect your GamingTools</h2>
</div>
<p class="about-text">
Expand Down
30 changes: 15 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ <h1 data-aos="fade-down">Welcome to GamingTools</h1>
<div id="popup" class="popup">
<div class="popup-content">
<div class="popup-left">
<img src="images/popup.png" alt="Gaming Tools Image">
<img src="images/popup.png" alt="Gaming Tools Image" loading="lazy">
</div>

<div class="popup-right">
Expand Down Expand Up @@ -159,7 +159,7 @@ <h3>Wireless Controllers for PlayStation 4</h3>
</div>
</div>
<div class="col-2" data-aos="fade-left">
<img src="images/controller1.png" class="controller" alt="Controller">
<img src="images/controller1.png" class="controller" alt="Controller" loading="lazy">
<div class="color-box"></div>
</div>
</div>
Expand Down Expand Up @@ -189,7 +189,7 @@ <h3>Controllers for Xbox One and Series X</h3>
</div>
</div>
<div class="col-2" data-aos="fade-left">
<img src="images/newcontroller3.png" class="controller" alt="Controller">
<img src="images/newcontroller3.png" class="controller" alt="Controller" loading="lazy">
<!-- replaced old blurry image with enhanced image -->
<div class="color-box"></div>

Expand Down Expand Up @@ -222,7 +222,7 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
</div>
<div class="col-2" data-aos="fade-left">
<img src="images/controller2.png" class="controller"
alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
alt="Controller" loading="lazy"><!--changed the image, as it was interchanged with the xbox controller image-->
<div class="color-box"></div>

</div>
Expand Down Expand Up @@ -254,7 +254,7 @@ <h3>VR Headset from Meta</h3>
</div>
<div class="col-2" data-aos="fade-left">
<img src="images/metaquest.jpg" class="controller"
alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
alt="Controller" loading="lazy"><!--changed the image, as it was interchanged with the xbox controller image-->
<div class="color-box"></div>

</div>
Expand Down Expand Up @@ -286,7 +286,7 @@ <h3>VR Headset from Apple</h3>
</div>
<div class="col-2" data-aos="fade-left">
<img src="images/visionpro.png" class="controller"
alt="Controller"><!--changed the image, as it was interchanged with the xbox controller image-->
alt="Controller" loading="lazy"><!--changed the image, as it was interchanged with the xbox controller image-->
<div class="color-box"></div>

</div>
Expand Down Expand Up @@ -317,7 +317,7 @@ <h3>High Performance Gaming Mouse</h3>
</div>
</div>
<div class="col-2" data-aos="fade-left">
<img src="images/mouse.png" class="controller" alt="Gaming Mouse">
<img src="images/mouse.png" class="controller" alt="Gaming Mouse" loading="lazy">
<div class="color-box"></div>

</div>
Expand Down Expand Up @@ -348,7 +348,7 @@ <h3>Mechanical Gaming Keyboard</h3>
</div>
</div>
<div class="col-2" data-aos="fade-left">
<img src="images/keyboard.png" class="controller" alt="Gaming Keyboard">
<img src="images/keyboard.png" class="controller" alt="Gaming Keyboard" loading="lazy">
<div class="color-box"></div>

</div>
Expand Down Expand Up @@ -379,7 +379,7 @@ <h3>Wireless Gaming Headset</h3>
</div>
</div>
<div class="col-2" data-aos="fade-left">
<img src="images/headset.png" class="controller" alt="Gaming Headset">
<img src="images/headset.png" class="controller" alt="Gaming Headset" loading="lazy">
<div class="color-box"></div>

</div>
Expand Down Expand Up @@ -410,7 +410,7 @@ <h3>Ergonomic Gaming Chair</h3>
</div>
</div>
<div class="col-2" data-aos="fade-left">
<img src="images/newchair.png" class="controller" alt="Gaming Chair">
<img src="images/newchair.png" class="controller" alt="Gaming Chair" loading="lazy">
<div class="color-box"></div>

</div>
Expand Down Expand Up @@ -491,7 +491,7 @@ <h4>Sarah malik</h4>
<li class="swiper-slide">
<div class="wrapper">
<div class="thumbnail">
<img src="images/boy2.png" alt="">
<img src="images/boy2.png" alt="" loading="lazy">
</div>
<div class="aside">
<p>Shopping on this website was a breeze! I love how user-friendly the interface is;
Expand All @@ -508,7 +508,7 @@ <h4>John Doe</h4>
<li class="swiper-slide">
<div class="wrapper">
<div class="thumbnail">
<img src="images/boy1.png" alt="">
<img src="images/boy1.png" alt="" loading="lazy">
</div>
<div class="aside">
<p>My order arrived much faster than I anticipated, which was a huge plus. The
Expand All @@ -525,7 +525,7 @@ <h4>Alex Johnson</h4>
<li class="swiper-slide">
<div class="wrapper">
<div class="thumbnail">
<img src="images/girl2.png" alt="">
<img src="images/girl2.png" alt="" loading="lazy">
</div>
<div class="aside">
<p>As a serious gamer, I always look for high-quality gear that can enhance my
Expand Down Expand Up @@ -566,7 +566,7 @@ <h2>Contact Our Customer Support Team</h2>
</div>
<div class="card-body">
<div class="image-section">
<img src="images/7725176.jpg" alt="Contact Image"
<img src="images/7725176.jpg" alt="Contact Image" loading="lazy"
style="max-width: 80%; height: auto; max-height: 500px;">
</div>
<div class="form-section">
Expand Down Expand Up @@ -595,7 +595,7 @@ <h2>Contact Our Customer Support Team</h2>
<div class="footer-content">
<div class="footer-section about">
<div class="logo-container">
<img src="images/logo.png" alt="GamingTools Logo" class="footer-logo">
<img src="images/logo.png" alt="GamingTools Logo" class="footer-logo" loading="lazy">
<h2 class="logo-text">Collect your GamingTools</h2>
</div>
<p class="about-text">
Expand Down