|
17 | 17 | margin:0; |
18 | 18 | padding:0; |
19 | 19 | overflow-x: hidden; |
20 | | - background-color:#242424; |
21 | 20 | color:white; |
22 | 21 | } |
23 | 22 | .ehh{ |
|
29 | 28 | b{ |
30 | 29 | font-weight:600; |
31 | 30 | } |
| 31 | + .blur{ |
| 32 | + backdrop-filter:blur(10px); |
| 33 | + } |
32 | 34 | .f-respond{ |
33 | 35 | font-size: 17px; |
34 | 36 | white-space: nowrap; |
|
37 | 39 | font-weight: 900; |
38 | 40 | } |
39 | 41 | .border-light{ |
40 | | - border: 1px solid lightgray; |
| 42 | + border: 1px solid gray; |
41 | 43 | } |
42 | 44 | .border-right-light{ |
43 | | - border-right: 1px solid lightgray; |
| 45 | + border-right: 1px solid gray; |
44 | 46 | } |
45 | 47 | .border-bottom-light{ |
46 | | - border-bottom: 1px solid lightgray; |
| 48 | + border-bottom: 1px solid gray; |
47 | 49 | } |
48 | 50 | .plr-l{ |
49 | 51 | padding-left: 32px; |
|
74 | 76 | left:0; |
75 | 77 | width: 93.5%; |
76 | 78 | } |
| 79 | + #myCanvas{ |
| 80 | + position:fixed; |
| 81 | + z-index:-1000; |
| 82 | + top:0; |
| 83 | + left:0; |
| 84 | + width:100%; |
| 85 | + height:100%; |
| 86 | + } |
77 | 87 | </style> |
78 | 88 | </head> |
79 | 89 | <body data='{ |
|
90 | 100 | <p>Building the web <span class="grad karla fw-strong">{ your way }.</span></p> |
91 | 101 | </div><br/><br/> |
92 | 102 | <div class="text-center m-m" computer> |
93 | | - <div class="grid-2 left-center border-light r"> |
| 103 | + <div class="grid-2 left-center border-light r blur"> |
94 | 104 | <div class="border-right-light"> |
95 | 105 | <div class="plr-l f-respond p-m text-left karla"> |
96 | 106 | <span class="gray">1|</span> <<b>body</b> data=<span class="ehh">'{count:0}'</span>><br/> |
|
107 | 117 | </div> |
108 | 118 | </div> |
109 | 119 | <div class="text-center m-m" mobile> |
110 | | - <div class="left-center border-light r"> |
| 120 | + <div class="left-center border-light r blur"> |
111 | 121 | <div class="border-bottom-light"> |
112 | 122 | <div class="plr-l f-respond p-m text-left karla"> |
113 | 123 | <span class="gray">1|</span> <<b>body</b> data=<span class="ehh">'{count:0}'</span>><br/> |
|
144 | 154 | } |
145 | 155 | </script> |
146 | 156 | <script src="https://snojs.github.io/sno/crystal.js"></script> |
| 157 | + <canvas id="myCanvas"></canvas> |
| 158 | + <script src="https://classicmc-studios.github.io/js/moss.js"></script> |
| 159 | + <script> |
| 160 | + createCanvas(screen.width,screen.height); |
| 161 | + bg("#242424"); |
| 162 | + //Snow_Particles |
| 163 | + var angle = 0; |
| 164 | + var W = screen.width; |
| 165 | + var H = screen.height; |
| 166 | + var mp = 50;//max particles |
| 167 | + var particles = []; |
| 168 | + for(var i = 0; i < mp; i++){ |
| 169 | + particles.push({ |
| 170 | + x: Math.random()*W, |
| 171 | + y: Math.random()*H, |
| 172 | + r: Math.random()*4+1, |
| 173 | + d: Math.random()*mp |
| 174 | + }); |
| 175 | + } |
| 176 | + function update(){ |
| 177 | + angle += 0.01; |
| 178 | + for(var i = 0; i < mp; i++){ |
| 179 | + var p = particles[i]; |
| 180 | + p.y += Math.cos(angle+p.d) + 1 + p.r/2; |
| 181 | + p.x += Math.sin(angle) * 2; |
| 182 | + if(p.x > W+5 || p.x < -5 || p.y > H){ |
| 183 | + if(i%3 > 0){particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};} |
| 184 | + else{ |
| 185 | + if(Math.sin(angle) > 0){particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};} |
| 186 | + else{particles[i] = {x: W+5, y: Math.random()*H, r: p.r
67E6
, d: p.d};} |
| 187 | + } |
| 188 | + } |
| 189 | + } |
| 190 | + } |
| 191 | + function draw(){ |
| 192 | + for(var i = 0; i < mp; i++){ |
| 193 | + noStroke();selectColor("#ffffff");var p = particles[i];ellipse(p.x,p.y,p.r); |
| 194 | + } |
| 195 | + update(); |
| 196 | + } |
| 197 | + window.main = function(){ |
| 198 | + requestAnimationFrame( main ) |
| 199 | + bg("#242424"); |
| 200 | + draw(); |
| 201 | + };main(); |
| 202 | + </script> |
| 203 | + |
147 | 204 | </body> |
148 | 205 | </html> |
0 commit comments