Add animated stars that fade in and out to sections without background images
Implements a new JavaScript function `initStars` that dynamically creates and appends circular star elements to sections with the class `.home-info`. These stars have random sizes, positions, fade animations, and durations, controlled by CSS and keyframes defined in `static/css/styles.css`. The `initStars` function is called on page load via `initPageLoadAnimation`. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 5e584ab0-c340-4432-97ef-1972582b60e9 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: e42678c3-4b34-4047-bd6d-316f729459e1 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d0a1d46d-d203-4308-bc6a-312ac7c0243b/5e584ab0-c340-4432-97ef-1972582b60e9/vuYxJMM
This commit is contained in:
@@ -307,6 +307,43 @@ hr {
|
||||
margin: 40px auto 64px auto;
|
||||
padding-bottom: 64px;
|
||||
color: var(--white);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.home-info::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -5%;
|
||||
width: 110%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.home-info > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.star {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
pointer-events: none;
|
||||
animation: starFade var(--duration) ease-in-out infinite;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
|
||||
@keyframes starFade {
|
||||
0%, 100% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.team-info {
|
||||
|
||||
Reference in New Issue
Block a user