Skip to content

Instantly share code, notes, and snippets.

@jksevend

jksevend/gist:7df220adfc5e99b7c30bb3acc2a5aded

Created March 18, 2025 19:10
Show Gist options
  • Save jksevend/7df220adfc5e99b7c30bb3acc2a5aded to your computer and use it in GitHub Desktop.
Save jksevend/7df220adfc5e99b7c30bb3acc2a5aded to your computer and use it in GitHub Desktop.
Download ZIP
modal glitter page effect
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pink Girly Glitter Effect</title>
<style>
body {
margin: 0;
overflow: hidden;
background-color: #fff2f9;
position: relative;
min-height: 100vh;
}
.glitter-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 9999;
}
.star {
position: absolute;
display: block;
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-size: contain;
opacity: 0;
animation: fall 3s linear forwards;
}
@keyframes fall {
0% {
transform: translateY(0) rotate(0deg) scale(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 0.8;
}
100% {
transform: translateY(100vh) rotate(360deg) scale(0.5);
opacity: 0;
}
}
.content {
padding: 20px;
position: relative;
z-index: 1;
}
</style>
</head>
<body>
<div class="glitter-container" id="glitterContainer"></div>
<div class="content">
<!-- Your page content goes here -->
<h1>Your Website Content</h1>
<p>This is where your actual page content would go.</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-family: Arial, sans-serif;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
tr:hover {
background-color: #f5f5f5;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
.status-active {
color: green;
font-weight: bold;
}
.status-inactive {
color: #999;
}
.status-pending {
color: orange;
}
</style>
</head>
<body>
<h1>Employee Directory</h1>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Position</th>
<th>Department</th>
<th>Location</th>
<th>Email</th>
<th>Phone</th>
<th>Start Date</th>
<th>Salary</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>John Smith</td>
<td>Software Engineer</td>
<td>Engineering</td>
<td>New York</td>
<td>[email protected]</td>
<td>(212) 555-1234</td>
<td>2018-05-12</td>
<td>$85,000</td>
<td class="status-active">Active</td>
</tr>
<tr>
<td>002</td>
<td>Sarah Johnson</td>
<td>Marketing Manager</td>
<td>Marketing</td>
<td>Chicago</td>
<td>[email protected]</td>
<td>(312) 555-2345</td>
<td>2017-11-03</td>
<td>$78,500</td>
<td class="status-active">Active</td>
</tr>
<tr>
<td>003</td>
<td>Michael Williams</td>
<td>Data Analyst</td>
<td>Analytics</td>
<td>San Francisco</td>
<td>[email protected]</td>
<td>(415) 555-3456</td>
<td>2019-02-18</td>
<td>$72,000</td>
<td class="status-active">Active</td>
</tr>
<tr>
<td>004</td>
<td>Emily Davis</td>
<td>Product Manager</td>
<td>Product</td>
<td>Boston</td>
<td>[email protected]</td>
<td>(617) 555-4567</td>
<td>2016-09-22</td>
<td>$92,000</td>
<td class="status-active">Active</td>
</tr>
<tr>
<td>005</td>
<td>Robert Brown</td>
<td>UX Designer</td>
<td>Design</td>
<td>Seattle</td>
<td>[email protected]</td>
<td>(206) 555-5678</td>
<td>2020-01-15</td>
<td>$68,000</td>
<td class="status-pending">Pending</td>
</tr>
<tr>
<td>006</td>
<td>Jennifer Garcia</td>
<td>HR Specialist</td>
<td>Human Resources</td>
<td>Austin</td>
<td>[email protected]</td>
<td>(512) 555-6789</td>
<td>2017-06-30</td>
<td>$65,500</td>
<td class="status-inactive">Inactive</td>
</tr>
<tr>
<td>007</td>
<td>David Miller</td>
<td>Sales Representative</td>
<td>Sales</td>
<td>Denver</td>
<td>[email protected]</td>
<td>(303) 555-7890</td>
<td>2019-11-08</td>
<td>$76,000</td>
<td class="status-active">Active</td>
</tr>
<tr>
<td>008</td>
<td>Lisa Wilson</td>
<td>Financial Analyst</td>
<td>Finance</td>
<td>Miami</td>
<td>[email protected]</td>
<td>(305) 555-8901</td>
<td>2018-03-17</td>
<td>$82,500</td>
<td class="status-active">Active</td>
</tr>
<tr>
<td>009</td>
<td>James Taylor</td>
<td>IT Support Specialist</td>
<td>IT</td>
<td>Portland</td>
<td>[email protected]</td>
<td>(503) 555-9012</td>
<td>2020-07-22</td>
<td>$62,000</td>
<td class="status-pending">Pending</td>
</tr>
<tr>
<td>010</td>
<td>Patricia Martinez</td>
<td>Content Writer</td>
<td>Content</td>
<td>Los Angeles</td>
<td>[email protected]</td>
<td>(213) 555-0123</td>
<td>2019-04-05</td>
<td>$67,500</td>
<td class="status-inactive">Inactive</td>
</tr>
</tbody>
</table>
</div>
<script>
// Create SVG stars with different colors
const createStarSVG = (color) => {
const svgNS = "http://www.w3.org/2000/svg";
const svg = document.createElementNS(svgNS, "svg");
svg.setAttribute("viewBox", "0 0 24 24");
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");
const path = document.createElementNS(svgNS, "path");
path.setAttribute("d", "M12 0l3.09 6.26L22 7.27l-5 4.87 1.18 6.88L12 16l-6.18 3.02L7 12.14 2 7.27l6.91-1.01L12 0z");
path.setAttribute("fill", color);
// Add glitter effect
const glitter = document.createElementNS(svgNS, "animate");
glitter.setAttribute("attributeName", "opacity");
glitter.setAttribute("values", "0.7;1;0.7");
glitter.setAttribute("dur", "0.5s");
glitter.setAttribute("repeatCount", "indefinite");
path.appendChild(glitter);
svg.appendChild(path);
return "data:image/svg+xml;charset=utf-8," + encodeURIComponent(new XMLSerializer().serializeToString(svg));
};
// Star colors (pink and rainbow)
const starColors = [
"#FF69B4", // Hot Pink
"#FFB6C1", // Light Pink
"#FFC0CB", // Pink
"#FF1493", // Deep Pink
"#FF00FF", // Magenta
"#FF0000", // Red
"#FFA500", // Orange
"#FFFF00", // Yellow
"#00FF00", // Green
"#00FFFF", // Cyan
"#0000FF", // Blue
"#8A2BE2" // Purple
];
// Create an array of star SVGs
const starSVGs = starColors.map(color => createStarSVG(color));
// Get the container
const container = document.getElementById('glitterContainer');
// Function to create a star
function createStar() {
const star = document.createElement('div');
star.className = 'star';
// Random position horizontally (0% to 100% of screen width)
const leftPos = Math.random() * 100;
star.style.left = leftPos + '%';
// Random position vertically (0% to 15% of screen height)
// This ensures stars start from the top portion of the screen
const topPos = Math.random() * 100;
star.style.top = topPos + '%';
// Random size
const size = Math.random() * 65 + 45;
star.style.width = size + 'px';
star.style.height = size + 'px';
// Random star color
const randomStar = starSVGs[Math.floor(Math.random() * starSVGs.length)];
star.style.backgroundImage = `url('${randomStar}')`;
// Random animation duration
const duration = Math.random() * 3 + 3;
star.style.animationDuration = duration + 's';
container.appendChild(star);
// Remove star after animation ends
setTimeout(() => {
star.remove();
}, duration * 1000);
}
// Create stars at intervals with better distribution
function startGlitterEffect() {
// Create initial burst across the screen
for (let i = 0; i < 40; i++) {
setTimeout(createStar, i * 100);
}
// Continue creating stars randomly across the screen
setInterval(() => {
// Create multiple stars at once for better distribution
const starCount = Math.floor(Math.random() * 5) + 10; // At least 2 stars each time
for (let i = 0; i < starCount; i++) {
setTimeout(createStar, i * 100);
}
}, 500);
}
// Start the effect when page loads
window.addEventListener('load', startGlitterEffect);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment