1+
12// Matrix rain effect
2- function createMatrixRain ( ) {
3- const matrix = document . getElementById ( 'matrix' ) ;
4- const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%^&*()' ;
5- const columnCount = Math . floor ( window . innerWidth / 20 ) ;
6-
7- for ( let i = 0 ; i < columnCount ; i ++ ) {
8- const column = document . createElement ( 'div' ) ;
9- column . className = 'matrix-column' ;
10- column . style . left = ( i * 20 ) + 'px' ;
11- column . style . animationDelay = ( Math . random ( ) * 20 ) + 's' ;
12-
13- let content = '' ;
14- for ( let j = 0 ; j < 50 ; j ++ ) {
15- content += characters [ Math . floor ( Math . random ( ) * characters . length ) ] + '<br>' ;
16- }
17- column . innerHTML = content ;
18- matrix . appendChild ( column ) ;
3+ const canvas = document . getElementById ( 'matrixCanvas' ) ;
4+ const ctx = canvas . getContext ( '2d' ) ;
5+
6+ canvas . width = window . innerWidth ;
7+ canvas . height = window . innerHeight ;
8+
9+ const katakana = 'アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン' ;
10+ const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' ;
11+ const nums = '0123456789' ;
12+ const alphabet = katakana + latin + nums ;
13+
14+ const fontSize = 16 ;
15+ const columns = canvas . width / fontSize ;
16+
17+ const rainDrops = [ ] ;
18+
19+ for ( let x = 0 ; x < columns ; x ++ ) {
20+ rainDrops [ x ] = 1 ;
21+ }
22+
23+ function draw ( ) {
24+ ctx . fillStyle = 'rgba(10, 10, 10, 0.05)' ;
25+ ctx . fillRect ( 0 , 0 , canvas . width , canvas . height ) ;
26+
27+ ctx . fillStyle = '#0F0' ;
28+ ctx . font = fontSize + 'px monospace' ;
29+
30+ for ( let i = 0 ; i < rainDrops . length ; i ++ ) {
31+ const text = alphabet . charAt ( Math . floor ( Math . random ( ) * alphabet . length ) ) ;
32+ ctx . fillText ( text , i * fontSize , rainDrops [ i ] * fontSize ) ;
33+
34+ if ( rainDrops [ i ] * fontSize > canvas . height && Math . random ( ) > 0.975 ) {
35+ rainDrops [ i ] = 0 ;
36+ }
37+ rainDrops [ i ] ++ ;
1938 }
20- }
21-
22- createMatrixRain ( ) ;
23- window . addEventListener ( 'resize' , ( ) => {
24- document . getElementById ( 'matrix' ) . innerHTML = '' ;
25- createMatrixRain ( ) ;
26- } ) ;
27-
28- // Intersection Observer for animations
29- const observer = new IntersectionObserver ( ( entries ) => {
30- entries . forEach ( entry => {
31- if ( entry . isIntersecting ) {
32- entry . target . style . opacity = '1' ;
33- entry . target . style . transform = 'translateY(0)' ;
34- }
35- } ) ;
36- } , { threshold : 0.1 } ) ;
37-
38- document . querySelectorAll ( '.area-card, .manifesto p, .about p' ) . forEach ( el => {
39- el . style . opacity = '0' ;
40- el . style . transform = 'translateY(20px)' ;
41- el . style . transition = 'all 0.8s ease-out' ;
42- observer . observe ( el ) ;
43- } ) ;
39+ }
40+
41+ setInterval ( draw , 30 ) ;
42+
43+ window . addEventListener ( 'resize' , ( ) => {
44+ canvas . width = window . innerWidth ;
45+ canvas . height = window . innerHeight ;
46+ } ) ;
0 commit comments