mirror of
https://github.com/Xevion/old.xevion.github.io.git
synced 2025-12-06 01:15:33 -06:00
working copy
This commit is contained in:
bchiang7
137
js/main.js
137
js/main.js
@@ -1,136 +1 @@
|
||||
$(function() {
|
||||
var contentSections = $('.section'),
|
||||
navigationItems = $('#dot-nav a'),
|
||||
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() {
|
||||
var x = $(window).width();
|
||||
var y = $(this).scrollTop();
|
||||
var $nav = $('#dot-nav');
|
||||
if (x > 768 && y > 500) {
|
||||
$nav.fadeIn();
|
||||
} else {
|
||||
$nav.fadeOut();
|
||||
}
|
||||
});
|
||||
|
||||
function updateNavigation() {
|
||||
contentSections.each(function() {
|
||||
var $this = $(this);
|
||||
var 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) {
|
||||
var windowWidth = $(window).width();
|
||||
var 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 ==================== //
|
||||
var $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() {
|
||||
var savedValue = this.value;
|
||||
this.value = '';
|
||||
this.baseScrollHeight = this.scrollHeight;
|
||||
this.value = savedValue;
|
||||
})
|
||||
.on('input.textarea', '.autoExpand', function() {
|
||||
var minRows = this.getAttribute('data-min-rows') | 0,
|
||||
rows;
|
||||
this.rows = minRows;
|
||||
rows = Math.ceil((this.scrollHeight - this.baseScrollHeight) / 17);
|
||||
this.rows = minRows + rows;
|
||||
});
|
||||
|
||||
var 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
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
"use strict";$(function(){function t(){n.each(function(){var t=$(this),o=$('#dot-nav a[href="#'+t.attr("id")+'"]').data("number")-1;t.offset().top-$(window).height()/2<$(window).scrollTop()&&t.offset().top+t.height()-$(window).height()/2>$(window).scrollTop()?e.eq(o).addClass("is-selected"):e.eq(o).removeClass("is-selected")})}function o(t){$("body,html").animate({scrollTop:t.offset().top+50},600)}var n=$(".section"),e=$("#dot-nav a"),i=$("#overlay a");t(),$(window).on("scroll",function(){t()}),e.on("click",function(t){t.preventDefault(),o($(this.hash))}),i.on("click",function(t){t.preventDefault(),o($(this.hash)),$("#toggle").click()}),$(".scroll-down").on("click",function(t){t.preventDefault(),o($(this.hash))}),$(".touch #dot-nav a").on("click",function(){$(".touch #dot-nav").removeClass("open")}),$(document).scroll(function(){var t=$(window).width(),o=$(this).scrollTop(),n=$("#dot-nav");t>768&&o>500?n.fadeIn():n.fadeOut()}),$("#toggle").click(function(t){$(this).toggleClass("active"),$("#overlay").toggleClass("open"),$("body").toggleClass("noScroll")}),$(window).on("resize",function(t){var o=$(window).width(),n=$("#overlay").hasClass("open");o>768?($("#dot-nav").show(),n&&($("#toggle").removeClass("active"),$("#overlay").removeClass("open"))):o<768&&$("#dot-nav").hide()});var a=$(".contact-input");a.focus(function(){$(this).parent().addClass("is-active is-completed")}),a.focusout(function(){""===$(this).val()&&$(this).parent().removeClass("is-completed"),$(this).parent().removeClass("is-active")}),$(document).one("focus.textarea",".autoExpand",function(){var t=this.value;this.value="",this.baseScrollHeight=this.scrollHeight,this.value=t}).on("input.textarea",".autoExpand",function(){var t=0|this.getAttribute("data-min-rows");this.rows=t;var o=Math.ceil((this.scrollHeight-this.baseScrollHeight)/17);this.rows=t+o});var s={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 s.Android()||s.BlackBerry()||s.iOS()||s.Opera()||s.Windows()}};s.any()||skrollr.init({render:function(t){},smoothScrolling:!1,forceHeight:!1})});
|
||||
128
js/particles.js
128
js/particles.js
@@ -1,127 +1 @@
|
||||
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);;
|
||||
"use strict";particlesJS("particles-js",{particles:{number:{value:50,density:{enable:!0,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:.75,random:!1,anim:{enable:!1,speed:.25,opacity_min:.1,sync:!1}},size:{value:3,random:!0,anim:{enable:!1,speed:50,size_min:.1,sync:!1}},line_linked:{enable:!0,distance:100,color:"#ffffff",opacity:.7,width:.5},move:{enable:!0,speed:3,direction:"none",random:!1,straight:!1,out_mode:"out",bounce:!1,attract:{enable:!1,rotateX:700,rotateY:1400}}},interactivity:{detect_on:"canvas",events:{onhover:{enable:!0,mode:"repulse"},onclick:{enable:!0,mode:"push"},resize:!0},modes:{grab:{distance:400,line_linked:{opacity:1}},bubble:{distance:400,size:40,duration:2,opacity:8,speed:3},repulse:{distance:100,duration:.3},push:{particles_nb:4},remove:{particles_nb:2}}},retina_detect:!0});
|
||||
Reference in New Issue
Block a user