diff options
| author | s1n <[email protected]> | 2019-11-05 20:39:19 -0800 |
|---|---|---|
| committer | s1n <[email protected]> | 2019-11-05 20:39:19 -0800 |
| commit | 0a1ce5a38bc2120f1f1040230bcf8e5a92acca10 (patch) | |
| tree | 3136207b491f4bf69cc27ceae1ba86ec78d25e40 | |
| parent | make br ip detec mobile only (diff) | |
| download | s1n.pw-admin-0a1ce5a38bc2120f1f1040230bcf8e5a92acca10.tar.xz s1n.pw-admin-0a1ce5a38bc2120f1f1040230bcf8e5a92acca10.zip | |
add snow and make background sparkles xmas
| -rw-r--r-- | index.html | 140 | ||||
| -rw-r--r-- | js/background-sparkles.js | 8 |
2 files changed, 135 insertions, 13 deletions
@@ -70,6 +70,123 @@ <script src="/js/app.js"></script>
<script id="js-konami" src="/js/background-sparkles.js"></script>
+ <!-- Snow -->
+ <canvas class="snow" style="position: absolute; top: 0; left: 0;">
+ <script>
+ var canvas = document.querySelector('.snow'),
+ ctx = canvas.getContext('2d'),
+ windowW = window.innerWidth,
+ windowH = window.innerHeight,
+ numFlakes = 125,
+ flakes = [];
+
+ if (screen.width < 768) { numFlakes = 50; } // If Mobile
+
+ function Flake(x, y) {
+ var maxWeight = 5,
+ maxSpeed = 1.2;
+
+ if (screen.width < 768) { maxSpeed = 1; } // If Mobile
+
+ this.x = x;
+ this.y = y;
+ this.r = randomBetween(0, 1);
+ this.a = randomBetween(0, Math.PI);
+ this.aStep = 0.01;
+
+ this.weight = randomBetween(2, maxWeight);
+ this.alpha = (this.weight / maxWeight);
+ this.speed = (this.weight / maxWeight) * maxSpeed;
+
+ this.update = function () {
+ this.x += Math.cos(this.a) * this.r;
+ this.a += this.aStep;
+
+ this.y += this.speed;
+ }
+ }
+
+ function init() {
+ var i = numFlakes,
+ flake,
+ x,
+ y;
+
+ while (i--) {
+ x = randomBetween(0, windowW, true);
+ y = randomBetween(0, windowH, true);
+
+ flake = new Flake(x, y);
+ flakes.push(flake);
+ }
+
+ scaleCanvas();
+ loop();
+ }
+
+ function scaleCanvas() {
+ canvas.width = windowW;
+ canvas.height = windowH;
+ }
+
+ function loop() {
+ var i = flakes.length,
+ z,
+ dist,
+ flakeA,
+ flakeB;
+
+ // clear canvas
+ ctx.save();
+ ctx.setTransform(1, 0, 0, 1, 0, 0);
+ ctx.clearRect(0, 0, windowW, windowH);
+ ctx.restore();
+
+ // loop of hell
+ while (i--) {
+
+ flakeA = flakes[i];
+ flakeA.update();
+
+
+ /*for (z = 0; z < flakes.length; z++) { flakeB=flakes[z]; if (flakeA !==flakeB && distanceBetween(flakeA,
+ flakeB) < 150) { ctx.beginPath(); ctx.moveTo(flakeA.x, flakeA.y); ctx.lineTo(flakeB.x, flakeB.y);
+ ctx.strokeStyle='#444444' ; ctx.stroke(); ctx.closePath(); } }*/
+
+ ctx.beginPath();
+ ctx.arc(flakeA.x, flakeA.y, flakeA.weight, 0, 2 * Math.PI, false);
+ ctx.fillStyle = 'rgba(255, 255, 255, ' + flakeA.alpha + ')';
+ ctx.fill();
+
+ if (flakeA.y >= windowH) {
+ flakeA.y = -flakeA.weight;
+ }
+ }
+
+ requestAnimationFrame(loop);
+ }
+
+ function randomBetween(min, max, round) {
+ var num = Math.random() * (max - min + 1) + min;
+
+ if (round) {
+ return Math.floor(num);
+ } else {
+ return num;
+ }
+ }
+
+ function distanceBetween(vector1, vector2) {
+ var dx = vector2.x - vector1.x,
+ dy = vector2.y - vector1.y;
+
+ return Math.sqrt(dx * dx + dy * dy);
+ }
+
+ init();
+ </script>
+ </canvas>
+
<!-- Navigation Bar -->
<div class="navigation-bar">
<nav class="nav">
@@ -118,21 +235,20 @@ <!-- Konami Music -->
<!-- Background Music
- // CREDITS: //
+ // CREDITS: //
- Title: The Classics - A New Retro Synthwave Mix
+ Title: The Classics - A New Retro Synthwave Mix
- Uploader: Confused Bi-Product of a Misinformed Culture
+ Uploader: Confused Bi-Product of a Misinformed Culture
- Full Credits: https://s1n.pw/konami/assets/midi/midi.mp3.txt
- -->
- <audio src="/konami/assets/midi/midi.mp3" id="music">
- <p>If you are reading this, it is because your browser does not support the audio element.</p>
- <script>
- var audio = document.getElementById("music");
- audio.volume = 0.1; // Volume Adjuster, might bind it to "- and +" one day if possible.
- </script>
- </audio>
+ Full Credits: https://s1n.pw/konami/assets/midi/midi.mp3.txt -->
+ <audio src="/konami/assets/midi/midi.mp3" id="music">
+ <p>If you are reading this, it is because your browser does not support the audio element.</p>
+ <script>
+ var audio = document.getElementById("music");
+ audio.volume = 0.1; // Volume Adjuster, might bind it to "- and +" one day if possible.
+ </script>
+ </audio>
<!-- Loading Animation -->
<div class="loader-wrapper">
diff --git a/js/background-sparkles.js b/js/background-sparkles.js index caac762..d4690ec 100644 --- a/js/background-sparkles.js +++ b/js/background-sparkles.js @@ -12,8 +12,14 @@ var pattern = Trianglify({ height: window.innerHeight, // White: #fdfbfb, Salmon: #cc3300 width: window.innerWidth, - x_colors: ['#040404', '#f9f9f9', '#fffff4', '#fbf7f5', '#d55454'], // Cappuccino: ['#854442', '#3c2f2f', '#fff4e6', '#be9b7b', '#4b3832'] + // Christmas Colours: + x_colors: ['#0F8A5F', '#f9f9f9', '#fffff4', '#fbf7f5', '#CC231E'], // Cappuccino: ['#854442', '#3c2f2f', '#fff4e6', '#be9b7b', '#4b3832'] y_colors: ['#f9f1f1', '#f9f9f9', '#fffff4', '#fbf7f5', '#f9f1f1'], // Random colour generator: "#"+((1<<24)*Math.random()|0).toString(16) + // + // Normal Colours: + // x_colors: ['#040404', '#f9f9f9', '#fffff4', '#fbf7f5', '#d55454'], + // y_colors: ['#f9f1f1', '#f9f9f9', '#fffff4', '#fbf7f5', '#f9f1f1'], + // variance: 10, // Gives it more style seed: Number.parseInt(Math.floor(Math.random() * 100)), // TODO: Live seed transitioning. cell_size: 160 // Cell size |