1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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);
|