diff options
Diffstat (limited to 'js/background-sparkles.js')
| -rw-r--r-- | js/background-sparkles.js | 105 |
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 |