|
|
| |
| function initMatrix() { |
| const canvas = document.getElementById('matrixCanvas'); |
| if (!canvas) return; |
|
|
| const ctx = canvas.getContext('2d'); |
| canvas.width = canvas.offsetWidth; |
| canvas.height = canvas.offsetHeight; |
|
|
| const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズブヅプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン'; |
| const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'; |
| const nums = '0123456789'; |
| const symbols = '!"#$%&\'()*+,-./:;<=>?@[\\]^_`{|}~'; |
| const alphabet = katakana + latin + nums + symbols; |
|
|
| const fontSize = 16; |
| const columns = canvas.width / fontSize; |
| const drops = []; |
| for (let i = 0; i < columns; i++) { |
| drops[i] = 1; |
| } |
|
|
| function draw() { |
| ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'; |
| ctx.fillRect(0, 0, canvas.width, canvas.height); |
| |
| ctx.fillStyle = '#0ff'; |
| ctx.font = fontSize + 'px monospace'; |
| |
| for (let i = 0; i < drops.length; i++) { |
| const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length)); |
| ctx.fillText(text, i * fontSize, drops[i] * fontSize); |
| |
| if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { |
| drops[i] = 0; |
| } |
| drops[i]++; |
| } |
| } |
|
|
| setInterval(draw, 33); |
| } |
|
|
| document.addEventListener('DOMContentLoaded', function() { |
| initMatrix(); |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
|
|
| |
| const darkModeToggle = document.getElementById('darkModeToggle'); |
| if (darkModeToggle) { |
| darkModeToggle.addEventListener('click', () => { |
| document.documentElement.classList.toggle('dark'); |
| localStorage.setItem('darkMode', document.documentElement.classList.contains('dark')); |
| }); |
| } |
|
|
| |
| if (localStorage.getItem('darkMode') === 'true' || |
| (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { |
| document.documentElement.classList.add('dark'); |
| } else { |
| document.documentElement.classList.remove('dark'); |
| } |
| }); |
