mirror of
https://github.com/Xevion/old.xevion.github.io.git
synced 2025-12-07 13:15:45 -06:00
working copy
This commit is contained in:
bchiang7
144
_scripts/main.js
Normal file
144
_scripts/main.js
Normal file
@@ -0,0 +1,144 @@
|
||||
$(function() {
|
||||
const contentSections = $('.section');
|
||||
const navigationItems = $('#dot-nav a');
|
||||
const overlayItems = $('#overlay a');
|
||||
|
||||
updateNavigation();
|
||||
|
||||
$(window).on('scroll', function() {
|
||||
updateNavigation();
|
||||
});
|
||||
|
||||
//smooth scroll to the section
|
||||
navigationItems.on('click', function(event) {
|
||||
event.preventDefault();
|
||||
smoothScroll($(this.hash));
|
||||
});
|
||||
|
||||
overlayItems.on('click', function(event) {
|
||||
event.preventDefault();
|
||||
smoothScroll($(this.hash));
|
||||
$('#toggle').click();
|
||||
});
|
||||
|
||||
// smooth scroll to second section
|
||||
$('.scroll-down').on('click', function(event) {
|
||||
event.preventDefault();
|
||||
smoothScroll($(this.hash));
|
||||
});
|
||||
|
||||
// close navigation on touch devices when selectinG an elemnt from the list
|
||||
$('.touch #dot-nav a').on('click', function() {
|
||||
$('.touch #dot-nav').removeClass('open');
|
||||
});
|
||||
|
||||
// ==================== VERTICAL NAV ON SCROLL ==================== //
|
||||
$(document).scroll(function() {
|
||||
const x = $(window).width();
|
||||
const y = $(this).scrollTop();
|
||||
const $nav = $('#dot-nav');
|
||||
if (x > 768 && y > 500) {
|
||||
$nav.fadeIn();
|
||||
} else {
|
||||
$nav.fadeOut();
|
||||
}
|
||||
});
|
||||
|
||||
function updateNavigation() {
|
||||
contentSections.each(function() {
|
||||
const $this = $(this);
|
||||
const activeSection = $('#dot-nav a[href="#' + $this.attr('id') + '"]').data('number') - 1;
|
||||
|
||||
if (($this.offset().top - $(window).height() / 2 < $(window).scrollTop()) && ($this.offset().top + $this.height() - $(window).height() / 2 > $(window).scrollTop())) {
|
||||
navigationItems.eq(activeSection).addClass('is-selected');
|
||||
} else {
|
||||
navigationItems.eq(activeSection).removeClass('is-selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function smoothScroll(target) {
|
||||
$('body,html').animate({ 'scrollTop': target.offset().top + 50 }, 600);
|
||||
}
|
||||
|
||||
// ==================== MOBILE MENU ==================== //
|
||||
$('#toggle').click(function(e) {
|
||||
$(this).toggleClass('active');
|
||||
$('#overlay').toggleClass('open');
|
||||
$('body').toggleClass('noScroll');
|
||||
});
|
||||
|
||||
$(window).on('resize', function(event) {
|
||||
const windowWidth = $(window).width();
|
||||
const isOpen = $('#overlay').hasClass('open');
|
||||
|
||||
if (windowWidth > 768) {
|
||||
$('#dot-nav').show();
|
||||
if (isOpen) {
|
||||
$('#toggle').removeClass('active');
|
||||
$('#overlay').removeClass('open');
|
||||
}
|
||||
} else if (windowWidth < 768) {
|
||||
$('#dot-nav').hide();
|
||||
}
|
||||
});
|
||||
|
||||
// ==================== CONTACT FORM ==================== //
|
||||
const $contactInput = $('.contact-input');
|
||||
|
||||
$contactInput.focus(function() {
|
||||
$(this).parent().addClass('is-active is-completed');
|
||||
});
|
||||
|
||||
$contactInput.focusout(function() {
|
||||
if ($(this).val() === "") {
|
||||
$(this).parent().removeClass('is-completed');
|
||||
}
|
||||
$(this).parent().removeClass('is-active');
|
||||
});
|
||||
|
||||
$(document).one('focus.textarea', '.autoExpand', function() {
|
||||
const savedValue = this.value;
|
||||
this.value = '';
|
||||
this.baseScrollHeight = this.scrollHeight;
|
||||
this.value = savedValue;
|
||||
}).on('input.textarea', '.autoExpand', function() {
|
||||
const minRows = this.getAttribute('data-min-rows') | 0;
|
||||
this.rows = minRows;
|
||||
const rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17);
|
||||
this.rows = minRows + rows;
|
||||
});
|
||||
|
||||
const isMobile = {
|
||||
Android: function() {
|
||||
return navigator.userAgent.match(/Android/i);
|
||||
},
|
||||
BlackBerry: function() {
|
||||
return navigator.userAgent.match(/BlackBerry/i);
|
||||
},
|
||||
iOS: function() {
|
||||
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
|
||||
},
|
||||
Opera: function() {
|
||||
return navigator.userAgent.match(/Opera Mini/i);
|
||||
},
|
||||
Windows: function() {
|
||||
return navigator.userAgent.match(/IEMobile/i);
|
||||
},
|
||||
any: function() {
|
||||
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
|
||||
}
|
||||
};
|
||||
|
||||
if (!isMobile.any()) {
|
||||
skrollr.init({
|
||||
render: function(data) {
|
||||
//Debugging - Log the current scroll position.
|
||||
// console.log(data.curTop);
|
||||
},
|
||||
smoothScrolling: false,
|
||||
forceHeight: false
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
127
_scripts/particles.js
Normal file
127
_scripts/particles.js
Normal file
@@ -0,0 +1,127 @@
|
||||
particlesJS("particles-js", {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 50,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 700
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
},
|
||||
"image": {
|
||||
"src": "img/github.svg",
|
||||
"width": 100,
|
||||
"height": 100
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.75,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 0.25,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 50,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": true,
|
||||
"distance": 100,
|
||||
"color": "#ffffff",
|
||||
"opacity": 0.7,
|
||||
"width": 0.5
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 3,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 700,
|
||||
"rotateY": 1400
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "repulse"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 400,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 100,
|
||||
"duration": 0.3
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
});
|
||||
// var count_particles, stats, update;
|
||||
// stats = new Stats;
|
||||
// stats.setMode(0);
|
||||
// stats.domElement.style.position = 'absolute';
|
||||
// stats.domElement.style.left = '0px';
|
||||
// stats.domElement.style.top = '0px';
|
||||
// document.body.appendChild(stats.domElement);
|
||||
// count_particles = document.querySelector('.js-count-particles');
|
||||
// update = function() {
|
||||
// stats.begin();
|
||||
// stats.end();
|
||||
// if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
|
||||
// count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
|
||||
// }
|
||||
// requestAnimationFrame(update);
|
||||
// };
|
||||
// requestAnimationFrame(update);;
|
||||
Reference in New Issue
Block a user