Skip to content

Commit b5a33cf

Browse files
authored
Merge pull request #110 from shrvtiprasad/fade-in
Added a Scroll Fade-In animation
2 parents 3448b35 + 7617e62 commit b5a33cf

File tree

3 files changed

+127
-72
lines changed

3 files changed

+127
-72
lines changed

index.html

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@
3535
</header>
3636

3737
<main>
38-
<section class="hero">
38+
<section class="hero fade-in">
3939
<div class="container">
4040
<h1>Showcase Your Front-End Creations</h1>
4141
<p>Discover, share, and get inspired by amazing front-end projects from developers around the world. Join the community and showcase your creativity!</p>
4242
<a href="#projects" class="btn-primary">Explore Projects</a>
4343
</div>
4444
</section>
4545

46-
<section class="container" id="browse">
46+
<section class="container fade-in" id="browse">
4747
<div class="filters">
4848
<h2><i class="fas fa-filter"></i> Filter Projects</h2>
4949
<div class="filter-controls">
@@ -87,9 +87,9 @@ <h2><i class="fas fa-filter"></i> Filter Projects</h2>
8787
</div>
8888
</section>
8989

90-
<section class="projects-section" id="projects">
91-
<div class="projects-container">
92-
<h2 class="section-title">Featured Projects</h2>
90+
<section class="projects-section fade-in" id="projects">
91+
<div class="projects-container fade-in">
92+
<h2 class="section-title fade-in">Featured Projects</h2>
9393
<div class="loading" id="loading"><div class="spinner"></div></div>
9494
<div class="projects-grid" id="projects-container" style="display: none;"></div>
9595
<div class="empty-state" id="empty-state" style="display: none;">
@@ -100,9 +100,9 @@ <h3>No projects found</h3>
100100
</div>
101101
</section>
102102

103-
<section class="reviews-section" id="reviews" style="cursor:auto;">
104-
<h2 class="review-section-title">Developer Reviews</h2>
105-
<div class="swiper review-swiper">
103+
<section class="reviews-section fade-in" id="reviews" style="cursor:auto;">
104+
<h2 class="review-section-title fade-in">Developer Reviews</h2>
105+
<div class="swiper review-swiper fade-in">
106106
<div class="swiper-wrapper">
107107
<div class="swiper-slide">
108108
<div class="testimonial">
@@ -160,7 +160,7 @@ <h3 class="review-name">Sara Ahmed</h3>
160160
</div>
161161
</section>
162162

163-
<section class="contact-section" id="contact" style="padding: 80px 0; color: white">
163+
<section class="contact-section fade-in" id="contact" style="padding: 80px 0; color: white">
164164
<div class="container" id="contact-container" style="max-width: 1000px; margin: 0 auto">
165165
<h2 class="section-title" style="font-size: 3rem; text-align: center; margin-bottom: 50px; font-weight: bold;">Contact Us</h2>
166166
<form id="contact-form" onsubmit="return validateForm()" style="display: flex; flex-direction: column; gap: 25px">
@@ -188,11 +188,13 @@ <h2 class="section-title" style="font-size: 3rem; text-align: center; margin-bot
188188
</form>
189189
<div id="form-status" style="text-align: center; margin-top: 30px; font-size: 1.2rem; display: none;">✅ Message sent successfully!</div>
190190
</div>
191+
</section>
192+
</main>
191193

192-
193-
</main>
194+
194195

195-
<footer class="footer">
196+
197+
<footer class="footer fade-in">
196198
<div class="footer-flex-container">
197199
<div class="footer-1">
198200
<div class="footer-logo">CodeCanvas</div>
@@ -228,14 +230,14 @@ <h2 class="section-title" style="font-size: 3rem; text-align: center; margin-bot
228230

229231
</section>
230232

231-
<div id="message-overlay">
232-
<div class="overlay-content">
233-
<i class="fas fa-check-circle"></i>
234-
<p>Message Delivered</p>
235-
</div>
233+
234+
<div id="message-overlay">
235+
<div class="overlay-content">
236+
<i class="fas fa-check-circle"></i>
237+
<p>Message Delivered</p>
236238
</div>
237-
</main>
238-
<script src="script.js"></script>
239+
</div>
239240

241+
<script src="script.js"></script>
240242
</body>
241243
</html>

script.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -615,3 +615,26 @@ scrollToTopBtn.addEventListener("click", () => {
615615
behavior: "smooth"
616616
});
617617
});
618+
document.addEventListener("DOMContentLoaded", () => {
619+
const faders = document.querySelectorAll('.fade-in');
620+
621+
const observer = new IntersectionObserver((entries, observer) => {
622+
entries.forEach(entry => {
623+
if (entry.isIntersecting) {
624+
entry.target.classList.add('animate');
625+
observer.unobserve(entry.target);
626+
}
627+
});
628+
}, { threshold: 0.1 });
629+
630+
faders.forEach(fade => observer.observe(fade));
631+
});
632+
entries.forEach((entry, index) => {
633+
if (entry.isIntersecting) {
634+
setTimeout(() => {
635+
entry.target.classList.add('animate');
636+
}, index * 100); // 100ms delay between cards
637+
observer.unobserve(entry.target);
638+
}
639+
});
640+

style.css

Lines changed: 83 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/* Base styles */
1+
22
* {
33
margin: 0;
44
padding: 0;
@@ -83,12 +83,33 @@
8383
transition: background 0.3s ease, color 0.3s ease;
8484
}
8585

86+
8687
.container,
8788
.filter-container,
8889
.projects-container {
89-
max-width: 1200px;
90-
margin: 0 auto;
91-
padding: 0 20px;
90+
91+
max-width: 1200px;
92+
margin: 0 auto;
93+
padding: 0 20px;
94+
}
95+
@keyframes Fadeinup {
96+
from {
97+
transform: translateY(20px);
98+
opacity: 0;
99+
}
100+
to {
101+
transform: translateY(0);
102+
opacity: 1;
103+
}
104+
}
105+
106+
.fade-in {
107+
opacity: 0; /* ✅ start hidden */
108+
transform: translateY(20px);
109+
}
110+
111+
.fade-in.animate {
112+
animation: Fadeinup 0.6s ease-out forwards;
92113
}
93114

94115
/* Header styles */
@@ -1008,13 +1029,15 @@ body.dark-theme .tag-badge {
10081029
}
10091030

10101031
/* Newly injected code */
1032+
10111033
#contact-container {
10121034
background-color: rgba(255, 255, 255, 0.151);
10131035
backdrop-filter: blur(2px);
10141036
border-radius: 30px;
10151037
border: 1px solid rgba(255, 255, 255, 0.29);
10161038
padding: 30px;
10171039
}
1040+
10181041
#email {
10191042
width: 100% !important;
10201043
font-size: 1.2rem;
@@ -1102,6 +1125,7 @@ textarea {
11021125
transform: scale(0.8);
11031126
opacity: 0;
11041127
}
1128+
11051129
to {
11061130
transform: scale(1);
11071131
opacity: 1;
@@ -1113,15 +1137,18 @@ textarea {
11131137
transform: scale(1);
11141138
opacity: 0.5;
11151139
}
1140+
11161141
50% {
11171142
transform: scale(1.05);
11181143
opacity: 1;
11191144
}
1145+
11201146
100% {
11211147
transform: scale(1);
11221148
opacity: 0.5;
11231149
}
11241150
}
1151+
11251152
.fas-animation {
11261153
animation: softPulse 3s infinite ease-in-out;
11271154
}
@@ -1223,44 +1250,47 @@ body.dark-theme .fill-btn:hover {
12231250
width: 100%;
12241251
}
12251252
}
1253+
12261254
/* ------------------------------------------- */
1227-
.dark-theme .filters {
1255+
.dark-theme .filters {
12281256

1229-
background: rgba(18, 25, 60, 0.75); /* dark blue translucent */
1230-
backdrop-filter: blur(12px);
1231-
-webkit-backdrop-filter: blur(12px);
1232-
1233-
border-radius: 16px;
1234-
border: 1px solid rgba(255, 255, 255, 0.1);
1235-
1236-
box-shadow:
1237-
0 0 8px rgba(44, 66, 255, 0.4),
1238-
0 0 16px rgba(44, 66, 255, 0.3);
1239-
1240-
color: #f0f4ff;
1241-
transition: all 0.3s ease;
1242-
}
1257+
background: rgba(18, 25, 60, 0.75);
1258+
/* dark blue translucent */
1259+
backdrop-filter: blur(12px);
1260+
-webkit-backdrop-filter: blur(12px);
12431261

1244-
.dark-theme .project-card {
1245-
background: rgba(18, 25, 60, 0.75); /* dark blue translucent */
1246-
backdrop-filter: blur(12px);
1247-
-webkit-backdrop-filter: blur(12px);
1248-
1249-
border-radius: 16px;
1250-
border: 1px solid rgba(255, 255, 255, 0.1);
1251-
1252-
box-shadow:
1253-
0 0 8px rgba(44, 66, 255, 0.4),
1254-
0 0 16px rgba(44, 66, 255, 0.3);
1255-
1256-
color: #f0f4ff;
1257-
transition: all 0.3s ease;
1258-
}
1262+
border-radius: 16px;
1263+
border: 1px solid rgba(255, 255, 255, 0.1);
1264+
1265+
box-shadow:
1266+
0 0 8px rgba(44, 66, 255, 0.4),
1267+
0 0 16px rgba(44, 66, 255, 0.3);
1268+
1269+
color: #f0f4ff;
1270+
transition: all 0.3s ease;
1271+
}
1272+
1273+
.dark-theme .project-card {
1274+
background: rgba(18, 25, 60, 0.75);
1275+
/* dark blue translucent */
1276+
backdrop-filter: blur(12px);
1277+
-webkit-backdrop-filter: blur(12px);
1278+
1279+
border-radius: 16px;
1280+
border: 1px solid rgba(255, 255, 255, 0.1);
1281+
1282+
box-shadow:
1283+
0 0 8px rgba(44, 66, 255, 0.4),
1284+
0 0 16px rgba(44, 66, 255, 0.3);
1285+
1286+
color: #f0f4ff;
1287+
transition: all 0.3s ease;
1288+
}
12591289

12601290
/* Dark theme styles for cards*/
12611291
body.dark-theme button:hover {
12621292
background-color: rgba(102, 126, 234, 0.3);
1263-
cursor: pointer;
1293+
cursor: pointer;
12641294
}
12651295

12661296

@@ -1293,7 +1323,7 @@ body.dark-theme textarea {
12931323

12941324
/* Dark mode buttons */
12951325
body.dark-theme button {
1296-
background-color: rgba(102, 126, 234, 0.3) ;
1326+
background-color: rgba(102, 126, 234, 0.3);
12971327
color: #ffffff !important;
12981328
border: 1px solid rgba(102, 126, 234, 0.3);
12991329
}
@@ -1305,22 +1335,22 @@ body.dark-theme button:hover {
13051335
}
13061336

13071337

1308-
#scrollToTopBtn {
1309-
position: fixed;
1310-
bottom: 2rem;
1311-
right: 2rem;
1312-
z-index: 999;
1313-
background-color: #667eea;
1314-
color: white;
1315-
border: none;
1316-
outline: none;
1317-
padding: 0.75rem 1rem;
1318-
border-radius: 50%;
1319-
font-size: 1.25rem;
1320-
cursor: pointer;
1321-
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
1322-
display: none;
1323-
transition: background 0.3s ease, transform 0.3s ease;
1338+
#scrollToTopBtn {
1339+
position: fixed;
1340+
bottom: 2rem;
1341+
right: 2rem;
1342+
z-index: 999;
1343+
background-color: #667eea;
1344+
color: white;
1345+
border: none;
1346+
outline: none;
1347+
padding: 0.75rem 1rem;
1348+
border-radius: 50%;
1349+
font-size: 1.25rem;
1350+
cursor: pointer;
1351+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
1352+
display: none;
1353+
transition: background 0.3s ease, transform 0.3s ease;
13241354
}
13251355

13261356
#scrollToTopBtn:hover {
@@ -1379,4 +1409,4 @@ body.dark-theme button:hover {
13791409
flex-wrap: wrap;
13801410
font-size: 14px;
13811411
gap: 50px;
1382-
}
1412+
}

0 commit comments

Comments
 (0)