remove jQuery
Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
parent
971251664a
commit
cf57f26691
5 changed files with 56 additions and 94 deletions
2
js/jquery-3.3.1.min.js
vendored
2
js/jquery-3.3.1.min.js
vendored
File diff suppressed because one or more lines are too long
142
js/script.js
142
js/script.js
|
|
@ -1,29 +1,40 @@
|
|||
var firstInit = true;
|
||||
|
||||
function mobileConditions() {
|
||||
return !($(window).width() > 900 && $(window).height() < $(window).width());
|
||||
return !(window.innerWidth > 900 && window.innerHeight < window.innerWidth);
|
||||
}
|
||||
|
||||
function tag(name, classes, id) {
|
||||
const el = document.createElement(name);
|
||||
if(classes) {
|
||||
for(let c of classes) {
|
||||
el.classList.add(c);
|
||||
}
|
||||
}
|
||||
if(id) {
|
||||
el.id = id;
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
function bgInit(useCSSbg) {
|
||||
$('.works-card').each(function() {
|
||||
var $el = $(this);
|
||||
|
||||
document.querySelectorAll('.works-card').forEach((el) => {
|
||||
const styles = getComputedStyle(el);
|
||||
if(firstInit) {
|
||||
var bg = $el.css('background-image');
|
||||
if(bg == 'none') bg = $el.css('background-color');
|
||||
$el.attr('data-bg', bg);
|
||||
var el = $('<div class="bg"></div>');
|
||||
el.css('background', bg);
|
||||
$('.bg-scroller').append(el);
|
||||
let bg = styles['background-image'];
|
||||
if(bg === 'none') bg = styles['background-color'];
|
||||
el.setAttribute('data-bg', bg);
|
||||
const bgEl = tag('div', ['bg']);
|
||||
bgEl.style.background = bg;
|
||||
document.querySelector('.bg-scroller').appendChild(bgEl);
|
||||
}
|
||||
|
||||
|
||||
|
||||
if(useCSSbg) {
|
||||
$el.css('background', $el.attr('data-bg'));
|
||||
$el.find('.text-container').css('opacity', '1');
|
||||
el.style.background = el.getAttribute('data-bg');
|
||||
el.querySelector('.text-container').styles.opacity = '1';
|
||||
}
|
||||
else {
|
||||
$el.css('background', '');
|
||||
el.style.background = '';
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -35,10 +46,10 @@ bgInit(false);
|
|||
function calculateBg() {
|
||||
if(!mobileConditions()) {
|
||||
bgInit(false);
|
||||
let backgrounds = $('.bg-scroller').find('.bg');
|
||||
let backgrounds = document.querySelector('.bg-scroller').querySelectorAll('.bg');
|
||||
let bgOps = new Array(backgrounds.length).fill(0);
|
||||
let textOps = new Array(backgrounds.length).fill(0);
|
||||
let scrolledWindows = ($(window).scrollTop() - $(window).height()) / $(window).height();
|
||||
let scrolledWindows = (window.scrollY - window.innerHeight) / window.innerHeight;
|
||||
if(scrolledWindows < 0) scrolledWindows = 0;
|
||||
let minBg = Math.floor(scrolledWindows);
|
||||
let maxBg = minBg + 1;
|
||||
|
|
@ -57,14 +68,14 @@ function calculateBg() {
|
|||
|
||||
bgOps[minBg] = 1;
|
||||
bgOps[maxBg] = delta;
|
||||
backgrounds.each(function(i) {
|
||||
$(this).css('opacity', bgOps[i]);
|
||||
backgrounds.forEach(function(el, i) {
|
||||
el.style.opacity = bgOps[i];
|
||||
});
|
||||
|
||||
textOps[minBg] = 1-delta;
|
||||
textOps[maxBg] = delta;
|
||||
$('.works-card .text-container').each(function(i) {
|
||||
$(this).css('opacity', textOps[i]);
|
||||
document.querySelectorAll('.works-card .text-container').forEach(function(el, i) {
|
||||
el.style.opacity = textOps[i];
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -75,45 +86,15 @@ function calculateBg() {
|
|||
|
||||
calculateBg();
|
||||
|
||||
var timer;
|
||||
|
||||
setInterval(function() {
|
||||
clearTimeout(timer);
|
||||
|
||||
timer = setTimeout(function() {
|
||||
var sections = $('section');
|
||||
|
||||
var hash = '';
|
||||
|
||||
sections.each(function() {
|
||||
var $el = $(this);
|
||||
var viewportPos = ($(window).scrollTop() - $el.offset().top) / $(window).height();
|
||||
|
||||
if(viewportPos < 0.4 && viewportPos > -0.6) {
|
||||
hash = $el.attr('id');
|
||||
}
|
||||
});
|
||||
|
||||
if(hash && '#' + hash != location.hash) {
|
||||
history.replaceState({
|
||||
page: hash
|
||||
}, $('title').html(), '#' + hash);
|
||||
}
|
||||
}, 200);
|
||||
}, 500);
|
||||
|
||||
function scrollAnimations() {
|
||||
calculateBg();
|
||||
|
||||
if(!mobileConditions()) {
|
||||
$('.main h1, .main h3').each(function() {
|
||||
var scrolledFrac = $(window).scrollTop() / $(window).height();
|
||||
$(this).css({
|
||||
opacity: Math.min(1, 1.2 - 1.5*scrolledFrac),
|
||||
position: 'relative',
|
||||
// fun fact: using transforms here causes weird rendering bugs in Chrome
|
||||
top: (scrolledFrac * $(window).height() / 2) + 'px'
|
||||
});
|
||||
document.querySelectorAll('.main h1, .main h3').forEach(function(el) {
|
||||
var 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';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -125,16 +106,16 @@ function scrollLoop() {
|
|||
}
|
||||
scrollLoop();
|
||||
|
||||
var canvas = $('canvas#bg')[0];
|
||||
var canvas = document.querySelector('canvas#bg');
|
||||
|
||||
canvas.width = $(window).width();
|
||||
canvas.height = $(window).height();
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
|
||||
var ctx = canvas.getContext('2d');
|
||||
|
||||
$(window).on('resize', function() {
|
||||
canvas.width = $(window).width();
|
||||
canvas.height = $(window).height();
|
||||
window.addEventListener('resize', () => {
|
||||
canvas.width = window.innerWidth;
|
||||
canvas.height = window.innerHeight;
|
||||
})
|
||||
|
||||
function Point() {
|
||||
|
|
@ -196,7 +177,7 @@ for(var i = 0; i < n; i++) {
|
|||
}
|
||||
|
||||
function loop() {
|
||||
if($(window).scrollTop() <= $(window).height()) {
|
||||
if(window.scrollY <= window.innerHeight) {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
for(var i = 0; i < n; i++) {
|
||||
|
|
@ -220,23 +201,23 @@ var sentences = [
|
|||
|
||||
var counter = 1;
|
||||
|
||||
var ticker = $("footer .ticker");
|
||||
var ticker = document.querySelector("footer .ticker");
|
||||
|
||||
function changeText() {
|
||||
var el = ticker,
|
||||
text = sentences[counter],
|
||||
oldText = el.text();
|
||||
oldText = el.textContent;
|
||||
|
||||
var x = setInterval(function() {
|
||||
if(oldText.length != 0) {
|
||||
oldText = oldText.slice(0, -1);
|
||||
el.text(oldText);
|
||||
el.textContent = oldText;
|
||||
}
|
||||
else {
|
||||
setTimeout(function() {
|
||||
var y = setInterval(function() {
|
||||
if(el.text().length != text.length) {
|
||||
el.text(text.slice(0, el.text().length+1));
|
||||
if(el.textContent.length != text.length) {
|
||||
el.textContent = text.slice(0, el.textContent.length+1);
|
||||
}
|
||||
else {
|
||||
setTimeout(function() {
|
||||
|
|
@ -256,24 +237,10 @@ function changeText() {
|
|||
}, 60);
|
||||
}
|
||||
|
||||
ticker.html(sentences[0]);
|
||||
ticker.textContent = sentences[0];
|
||||
|
||||
setTimeout(changeText, 5000);
|
||||
|
||||
$('a[href^="#"]').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
var el = $($(this).attr('href'));
|
||||
|
||||
var distance = Math.abs($(window).scrollTop() - $(el).offset().top);
|
||||
|
||||
var time = Math.floor( Math.sqrt(distance / $(document).height()) * 1500 );
|
||||
|
||||
$('html, body').animate({
|
||||
scrollTop: el.offset().top
|
||||
}, time);
|
||||
});
|
||||
|
||||
// slight convenience: fix the header section with my correct age automatically
|
||||
|
||||
const birthday = {
|
||||
|
|
@ -288,7 +255,7 @@ if(today.getMonth() <= birthday.month && today.getDate() < birthday.date) {
|
|||
}
|
||||
const tens = ['', ' ten plus', ' twenty', ' thirty', ' forty', ' fifty', ' sixty', ' seventy', 'n eighty', ' ninety'];
|
||||
const ones = ['', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
|
||||
$('.age').html(`${tens[Math.floor(age / 10)]} ${ones[age % 10]}`);
|
||||
document.querySelector('.age').textContent = `${tens[Math.floor(age / 10)]} ${ones[age % 10]}`;
|
||||
|
||||
// easter egg
|
||||
|
||||
|
|
@ -301,7 +268,7 @@ var mode = 0;
|
|||
|
||||
var eei = 0;
|
||||
|
||||
$(window).on('keypress', function(e) {
|
||||
window.addEventListener('keypress', e => {
|
||||
const clapper = document.querySelector('.clapper');
|
||||
var sequence = sequences[mode];
|
||||
if(e.keyCode == sequence[eei]) {
|
||||
|
|
@ -309,18 +276,17 @@ $(window).on('keypress', function(e) {
|
|||
}
|
||||
else {
|
||||
eei = 0;
|
||||
console.log(`expected ${sequence[eei]}, got ${e.keyCode}`);
|
||||
}
|
||||
|
||||
if(eei == sequence.length) {
|
||||
clapper.classList.toggle('clapping');
|
||||
setTimeout(() => {
|
||||
if(mode === 1) {
|
||||
$('body').removeClass('dark-mode');
|
||||
document.body.classList.remove('dark-mode');
|
||||
mode = 0;
|
||||
}
|
||||
else {
|
||||
$('body').addClass('dark-mode');
|
||||
document.body.classList.add('dark-mode');
|
||||
mode = 1;
|
||||
}
|
||||
eei = 0;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue