3/28/2020, 10:30HEADmaster

1 files changed, 105 insertions, 0 deletions

diff --git a/js/background-sparkles.js b/js/background-sparkles.js
new file mode 100644
index 0000000..9c67fc2
--- /dev/null
+++ b/js/background-sparkles.js
@@ -0,0 +1,105 @@
+// Background only renders based on the original browser window size when
+// starting to load the site. Due to rendering issues, I don't think I
+// can do it other wise.
+
+///////////////
+// SCRIPT #1 //
+///////////////
+
+// If light mode detected, in reality, if nothing is detected lmao
+// Dark mode feature was removed lol
+// Set up base pattern
+var pattern = Trianglify({
+    height: window.innerHeight, // White: #fdfbfb, Salmon: #cc3300
+    width: window.innerWidth,
+    // Christmas Colours:
+    x_colors: ['#040404', '#f9f9f9', '#fffff4', '#fbf7f5', '#d55454'], // 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'],
+    //
+    // Christmas Colours:
+    // x_colors: ['#0F8A5F', '#f9f9f9', '#fffff4', '#fbf7f5', '#CC231E'],
+    // 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
+});
+
+// REMOVED bc looked ugly
+// If dark mode detected
+// if (matchMedia('(prefers-color-scheme: dark)').matches) {
+//     var pattern = Trianglify({
+//         height: window.innerHeight, // White: #fdfbfb, Salmon: #cc3300
+//         width: window.innerWidth,
+//         x_colors: ['#040404', '#111111', '#111111', '#111111', '#d55454'], // Cappuccino: ['#854442', '#3c2f2f', '#fff4e6', '#be9b7b', '#4b3832']
+//         y_colors: ['#f9f1f1', '#111111', '#111111', '#111111', '#f9f1f1'], // Random colour generator: "#"+((1<<24)*Math.random()|0).toString(16)
+//         variance: 10, // Gives it more style
+//         seed: Number.parseInt(Math.floor(Math.random() * 100)), // TODO: Live seed transitioning.
+//         cell_size: 160 // Cell size
+//     });
+// }
+
+// // Canvas
+// document.body.appendChild(pattern.canvas())
+
+// SVG
+document.body.appendChild(pattern.svg())
+
+
+
+// // PNG
+// var png = document.createElement('img')
+// png.src = pattern.png()
+// document.body.appendChild(png)
+
+///////////////
+// SCRIPT #2 //
+///////////////
+
+$('.title-wrapper').css('width', window.innerWidth);
+$('.title-wrapper').css('height', window.innerHeight);
+
+
+var time = 10,
+    $paths = $('body').find('svg').find('path'),
+    pathCollection = $paths.get(),
+    count = $paths.length;
+
+// // Log variable "count"
+// console.log(count);
+
+pathCollection.sort(function () {
+    return Math.random() * 10 > 5 ? 1 : -1;
+});
+
+function showText() {
+    var title = $('h1'),
+        subtitle = $('h2');
+
+    title.removeClass('hidden');
+    setTimeout(function () {
+        subtitle.removeClass('hidden');
+    }, 500);
+}
+
+setTimeout(function () {
+    $.each(pathCollection, function (i, el) {
+        var $path = $(this);
+        setTimeout(function () {
+
+            $path.css('opacity', '1');
+        }, time)
+        time += 10;
+
+        if (i + 1 === count) {
+            setTimeout(function () {
+                showText();
+            }, 2000);
+        }
+
+    });
+}, 2000);
\ No newline at end of file