|
8 | 8 | <link rel="icon" type="image/x-icon" href="{{ 'favicon.ico' | relative_url }}"> |
9 | 9 | </head> |
10 | 10 | <body> |
11 | | - <!-- Matrix Rain Effect --> |
12 | | - <div class="matrix-rain" id="matrixRain"></div> |
13 | 11 | <!-- Floating Particles --> |
14 | 12 | <div class="particle-field" id="particleField"></div> |
15 | 13 |
|
|
20 | 18 | {% include footer.html %} |
21 | 19 | <!-- JavaScript for Effects --> |
22 | 20 | <script> |
23 | | - // Matrix Rain Effect |
24 | | - function createMatrixRain() { |
25 | | - const matrixContainer = document.getElementById('matrixRain'); |
26 | | - if (!matrixContainer) return; |
27 | | - // Clear any existing content |
28 | | - matrixContainer.innerHTML = ''; |
29 | | - |
30 | | - |
31 | | - const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン'; |
32 | | - |
33 | | - |
34 | | - |
35 | | - // Calculate number of columns based on screen width |
36 | | - const numColumns = Math.floor(window.innerWidth / 20); |
37 | | - |
38 | | - for (let i = 0; i < numColumns; i++) { |
39 | | - const column = document.createElement('div'); |
40 | | - column.className = 'matrix-column'; |
41 | | - |
42 | | - column.style.left = (i * 20) + 'px'; |
43 | | - column.style.animationDuration = (Math.random() * 4 + 3) + 's'; |
44 | | - column.style.animationDelay = Math.random() * 2 + 's'; |
45 | | - |
46 | | - let text = ''; |
47 | | - const numChars = Math.floor(window.innerHeight / 20); |
48 | | - for (let j = 0; j < numChars; j++) { |
49 | | - text += chars[Math.floor(Math.random() * chars.length)] + '\n'; |
50 | | - } |
51 | | - column.textContent = text; |
52 | | - matrixContainer.appendChild(column); |
53 | | - } |
54 | | - |
55 | | - // Refresh columns periodically |
56 | | - setInterval(() => { |
57 | | - const columns = matrixContainer.querySelectorAll('.matrix-column'); |
58 | | - columns.forEach(column => { |
59 | | - if (Math.random() > 0.95) { |
60 | | - let text = ''; |
61 | | - const numChars = Math.floor(window.innerHeight / 20); |
62 | | - for (let j = 0; j < numChars; j++) { |
63 | | - text += chars[Math.floor(Math.random() * chars.length)] + '\n'; |
64 | | - } |
65 | | - column.textContent = text; |
66 | | - } |
67 | | - }); |
68 | | - }, 150); |
69 | | - } |
70 | 21 | // Floating Particles |
71 | 22 | function createParticles() { |
72 | 23 | const particleContainer = document.getElementById('particleField'); |
|
0 commit comments