var => {let, const}
Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
parent
cf57f26691
commit
d331c7d568
1 changed files with 46 additions and 47 deletions
93
js/script.js
93
js/script.js
|
|
@ -1,4 +1,4 @@
|
|||
var firstInit = true;
|
||||
let firstInit = true;
|
||||
|
||||
function mobileConditions() {
|
||||
return !(window.innerWidth > 900 && window.innerHeight < window.innerWidth);
|
||||
|
|
@ -7,7 +7,7 @@ function mobileConditions() {
|
|||
function tag(name, classes, id) {
|
||||
const el = document.createElement(name);
|
||||
if(classes) {
|
||||
for(let c of classes) {
|
||||
for(const c of classes) {
|
||||
el.classList.add(c);
|
||||
}
|
||||
}
|
||||
|
|
@ -46,13 +46,13 @@ bgInit(false);
|
|||
function calculateBg() {
|
||||
if(!mobileConditions()) {
|
||||
bgInit(false);
|
||||
let backgrounds = document.querySelector('.bg-scroller').querySelectorAll('.bg');
|
||||
let bgOps = new Array(backgrounds.length).fill(0);
|
||||
let textOps = new Array(backgrounds.length).fill(0);
|
||||
const backgrounds = document.querySelector('.bg-scroller').querySelectorAll('.bg');
|
||||
const bgOps = new Array(backgrounds.length).fill(0);
|
||||
const textOps = new Array(backgrounds.length).fill(0);
|
||||
let scrolledWindows = (window.scrollY - window.innerHeight) / window.innerHeight;
|
||||
if(scrolledWindows < 0) scrolledWindows = 0;
|
||||
let minBg = Math.floor(scrolledWindows);
|
||||
let maxBg = minBg + 1;
|
||||
const minBg = Math.floor(scrolledWindows);
|
||||
const maxBg = minBg + 1;
|
||||
let delta = scrolledWindows - minBg;
|
||||
if(delta < 0.3) {
|
||||
delta = 0;
|
||||
|
|
@ -91,7 +91,7 @@ function scrollAnimations() {
|
|||
|
||||
if(!mobileConditions()) {
|
||||
document.querySelectorAll('.main h1, .main h3').forEach(function(el) {
|
||||
var scrolledFrac = window.scrollY / window.innerHeight;
|
||||
const scrolledFrac = window.scrollY / window.innerHeight;
|
||||
el.style.opacity = Math.min(1, 1.2 - 1.5*scrolledFrac).toString();
|
||||
el.style.position = 'relative';
|
||||
el.style.top = (scrolledFrac * window.innerHeight / 2).toString() + 'px';
|
||||
|
|
@ -106,52 +106,50 @@ function scrollLoop() {
|
|||
}
|
||||
scrollLoop();
|
||||
|
||||
var canvas = document.querySelector('canvas#bg');
|
||||
const canvas = document.querySelector('canvas#bg');
|
||||
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
addEventListener('resize', () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
})
|
||||
});
|
||||
|
||||
function Point() {
|
||||
var p = this;
|
||||
|
||||
var r = 8;
|
||||
const r = 8;
|
||||
|
||||
// progress below 0 is neglected, negative initial
|
||||
// progress serves to introduce random delays -
|
||||
// at 0.05 progress points per second, for example
|
||||
// a dot with initial progress -0.15 will run 2 frames
|
||||
// after a dot with initial progress -0.05
|
||||
var initialProgress = -4 * Math.random();
|
||||
const initialProgress = -4 * Math.random();
|
||||
|
||||
// moves point to a random location and
|
||||
// resets its progress
|
||||
this.init = function() {
|
||||
p.x = Math.random() * canvas.width;
|
||||
p.y = Math.random() * canvas.height;
|
||||
p.progress = initialProgress;
|
||||
this.x = Math.random() * canvas.width;
|
||||
this.y = Math.random() * canvas.height;
|
||||
this.progress = initialProgress;
|
||||
}
|
||||
|
||||
this.draw = function() {
|
||||
if(p.progress >= 0) {
|
||||
if(this.progress >= 0) {
|
||||
// opacity of of dot changes with progress
|
||||
const isDarkMode = document.body.classList.contains('dark-mode');
|
||||
let color = isDarkMode ? 255 : 0;
|
||||
let multiplier = isDarkMode ? 0.05 : 0.005;
|
||||
ctx.fillStyle = `rgba(${color}, ${color}, ${color}, ${Math.sqrt(p.progress*multiplier)})`;
|
||||
const color = isDarkMode ? 255 : 0;
|
||||
const multiplier = isDarkMode ? 0.05 : 0.005;
|
||||
ctx.fillStyle = `rgba(${color}, ${color}, ${color}, ${Math.sqrt(this.progress*multiplier)})`;
|
||||
ctx.beginPath();
|
||||
// radius calculation: maps progress from [0, 1] to [0, pi],
|
||||
// then takes sine of that to get an increase, then decrease
|
||||
// in radius. absolute value to prevent floating point errors
|
||||
// accidentally causing negative sine values which cause ctx.arc
|
||||
// to throw errors
|
||||
ctx.arc(p.x, p.y, Math.abs(Math.sin(Math.PI*p.progress)*r), 0, 2*Math.PI);
|
||||
ctx.arc(this.x, this.y, Math.abs(Math.sin(Math.PI*this.progress)*r), 0, 2*Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
|
|
@ -159,19 +157,20 @@ function Point() {
|
|||
// stars come faster than they go
|
||||
// so user can look at them longer
|
||||
// i guess? idk this just looked pretty
|
||||
if(p.progress > 0.5)
|
||||
p.progress += 0.005;
|
||||
if(this.progress > 0.5)
|
||||
this.progress += 0.005;
|
||||
else
|
||||
p.progress += 0.05;
|
||||
p.draw();
|
||||
if(p.progress >= 1) p.init();
|
||||
this.progress += 0.05;
|
||||
this.draw();
|
||||
if(this.progress >= 1) this.init();
|
||||
}
|
||||
}
|
||||
var dots = [];
|
||||
|
||||
var n = 20;
|
||||
const dots = [];
|
||||
|
||||
for(var i = 0; i < n; i++) {
|
||||
const n = 20;
|
||||
|
||||
for(let i = 0; i < n; i++) {
|
||||
dots[i] = new Point();
|
||||
dots[i].init();
|
||||
}
|
||||
|
|
@ -180,7 +179,7 @@ function loop() {
|
|||
if(window.scrollY <= window.innerHeight) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for(var i = 0; i < n; i++) {
|
||||
for(let i = 0; i < n; i++) {
|
||||
dots[i].render();
|
||||
}
|
||||
}
|
||||
|
|
@ -190,7 +189,7 @@ function loop() {
|
|||
|
||||
loop();
|
||||
|
||||
var sentences = [
|
||||
const sentences = [
|
||||
'Semicolons optional.',
|
||||
'Best viewed in Visual Studio Code.',
|
||||
'sh -c "$(curl -sL https://nsood.in/randomscript.sh)"',
|
||||
|
|
@ -199,23 +198,23 @@ var sentences = [
|
|||
'Boolean logic jokes are funny, whether you laugh xor not.',
|
||||
];
|
||||
|
||||
var counter = 1;
|
||||
let counter = 1;
|
||||
|
||||
var ticker = document.querySelector("footer .ticker");
|
||||
const ticker = document.querySelector("footer .ticker");
|
||||
|
||||
function changeText() {
|
||||
var el = ticker,
|
||||
text = sentences[counter],
|
||||
const el = ticker;
|
||||
const text = sentences[counter];
|
||||
oldText = el.textContent;
|
||||
|
||||
var x = setInterval(function() {
|
||||
const x = setInterval(function() {
|
||||
if(oldText.length != 0) {
|
||||
oldText = oldText.slice(0, -1);
|
||||
el.textContent = oldText;
|
||||
}
|
||||
else {
|
||||
setTimeout(function() {
|
||||
var y = setInterval(function() {
|
||||
const y = setInterval(function() {
|
||||
if(el.textContent.length != text.length) {
|
||||
el.textContent = text.slice(0, el.textContent.length+1);
|
||||
}
|
||||
|
|
@ -248,7 +247,7 @@ const birthday = {
|
|||
month: 1,
|
||||
year: 2001,
|
||||
}
|
||||
let today = new Date();
|
||||
const today = new Date();
|
||||
let age = today.getFullYear() - birthday.year;
|
||||
if(today.getMonth() <= birthday.month && today.getDate() < birthday.date) {
|
||||
--age;
|
||||
|
|
@ -259,18 +258,18 @@ document.querySelector('.age').textContent = `${tens[Math.floor(age / 10)]} ${on
|
|||
|
||||
// easter egg
|
||||
|
||||
var sequences = [
|
||||
const sequences = [
|
||||
[ 99, 108, 97, 112, 111, 102, 102 ],
|
||||
[ 99, 108, 97, 112, 111, 110 ],
|
||||
];
|
||||
|
||||
var mode = 0;
|
||||
let mode = 0;
|
||||
|
||||
var eei = 0;
|
||||
let eei = 0;
|
||||
|
||||
window.addEventListener('keypress', e => {
|
||||
addEventListener('keypress', e => {
|
||||
const clapper = document.querySelector('.clapper');
|
||||
var sequence = sequences[mode];
|
||||
const sequence = sequences[mode];
|
||||
if(e.keyCode == sequence[eei]) {
|
||||
eei++;
|
||||
}
|
||||
|
|
@ -293,4 +292,4 @@ window.addEventListener('keypress', e => {
|
|||
setTimeout(() => clapper.classList.toggle('clapping'), 500);
|
||||
}, 500);
|
||||
}
|
||||
})
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue