diff --git a/src/assets/js/main.js b/src/assets/js/main.js index afc67da..ffb4a90 100644 --- a/src/assets/js/main.js +++ b/src/assets/js/main.js @@ -5,59 +5,56 @@ */ (function($) { - skel - .breakpoints({ - xlarge: '(max-width: 1680px)', - large: '(max-width: 1280px)', - medium: '(max-width: 980px)', - small: '(max-width: 736px)', - xsmall: '(max-width: 480px)' - }); + skel.breakpoints({ + xlarge: "(max-width: 1680px)", + large: "(max-width: 1280px)", + medium: "(max-width: 980px)", + small: "(max-width: 736px)", + xsmall: "(max-width: 480px)" + }); $(function() { - var $window = $(window), - $body = $('body'), - $wrapper = $('#page-wrapper'), - $banner = $('#banner'), - $header = $('#header'); + $body = $("body"), + $wrapper = $("#page-wrapper"), + $banner = $("#banner"), + $header = $("#header"); // Disable animations/transitions until the page has loaded. - $body.addClass('is-loading'); + $body.addClass("is-loading"); - $window.on('load', function() { + $window.on("load", function() { window.setTimeout(function() { - $body.removeClass('is-loading'); + $body.removeClass("is-loading"); }, 100); }); // Mobile? - if (skel.vars.mobile) - $body.addClass('is-mobile'); + if (skel.vars.mobile) $body.addClass("is-mobile"); else skel - .on('-medium !medium', function() { - $body.removeClass('is-mobile'); - }) - .on('+medium', function() { - $body.addClass('is-mobile'); - }); + .on("-medium !medium", function() { + $body.removeClass("is-mobile"); + }) + .on("+medium", function() { + $body.addClass("is-mobile"); + }); // Fix: Placeholder polyfill. - $('form').placeholder(); + $("form").placeholder(); // Prioritize "important" elements on medium. - skel.on('+medium -medium', function() { + skel.on("+medium -medium", function() { $.prioritize( - '.important\\28 medium\\29', - skel.breakpoint('medium').active + ".important\\28 medium\\29", + skel.breakpoint("medium").active ); }); $("#menu").show(); // Menu. - $('#menu') + $("#menu") .append('') .appendTo($body) .panel({ @@ -66,148 +63,146 @@ hideOnSwipe: true, resetScroll: true, resetForms: true, - side: 'right', + side: "right", target: $body, - visibleClass: 'is-menu-visible' + visibleClass: "is-menu-visible" }); // Header. - if (skel.vars.IEVersion < 9) - $header.removeClass('alt'); + if (skel.vars.IEVersion < 9) $header.removeClass("alt"); - if ($banner.length > 0 && - $header.hasClass('alt')) { - - $window.on('resize', function() { - $window.trigger('scroll'); + if ($banner.length > 0 && $header.hasClass("alt")) { + $window.on("resize", function() { + $window.trigger("scroll"); }); $banner.scrollex({ bottom: $header.outerHeight() + 1, terminate: function() { - $header.removeClass('alt'); + $header.removeClass("alt"); }, enter: function() { - $header.addClass('alt'); + $header.addClass("alt"); }, leave: function() { - $header.removeClass('alt'); + $header.removeClass("alt"); } }); - // Particles - if ($( window ).width() > 980) { - particlesJS('banner', { - "particles": { - "number": { - "value": 65, - "density": { - "enable": false, - "value_area": 800 - } - }, - "color": { - "value": "#f99081" - }, - "shape": { - "type": "circle", - "stroke": { - "width": 0, - "color": "#000000" - }, - "polygon": { - "nb_sides": 5 - }, - "image": { - "src": "img/github.svg", - "width": 100, - "height": 100 - } - }, - "opacity": { - "value": 0.6, - "random": true, - "anim": { - "enable": false, - "speed": 1, - "opacity_min": 0.4, - "sync": false - } - }, - "size": { - "value": 14, - "random": true, - "anim": { - "enable": true, - "speed": 6, - "size_min": 4, - "sync": false - } - }, - "line_linked": { - "enable": true, - "distance": 250, - "color": "#f99081", - "opacity": 0.8, - "width": 2 - }, - "move": { - "enable": true, - "speed": 0.4, - "direction": "none", - "random": true, - "straight": false, - "out_mode": "out", - "bounce": false, - "attract": { - "enable": false, - "rotateX": 600, - "rotateY": 1200 - } - } - }, - "interactivity": { - "detect_on": "canvas", - "events": { - "onhover": { - "enable": true, - "mode": "grab" - }, - "onclick": { - "enable": true, - "mode": "push" - }, - "resize": true - }, - "modes": { - "grab": { - "distance": 200, - "line_linked": { - "opacity": 0.8 + // Particles + if ($(window).width() > 980) { + particlesJS("banner", { + particles: { + number: { + value: 65, + density: { + enable: false, + value_area: 800 + } + }, + color: { + value: "#f99081" + }, + shape: { + type: "circle", + stroke: { + width: 0, + color: "#000000" + }, + polygon: { + nb_sides: 5 + }, + image: { + src: "img/github.svg", + width: 100, + height: 100 + } + }, + opacity: { + value: 0.6, + random: true, + anim: { + enable: false, + speed: 1, + opacity_min: 0.4, + sync: false + } + }, + size: { + value: 14, + random: true, + anim: { + enable: true, + speed: 6, + size_min: 4, + sync: false + } + }, + line_linked: { + enable: true, + distance: 250, + color: "#f99081", + opacity: 0.8, + width: 2 + }, + move: { + enable: true, + speed: 0.4, + direction: "none", + random: true, + straight: false, + out_mode: "out", + bounce: false, + attract: { + enable: false, + rotateX: 600, + rotateY: 1200 + } } }, - "bubble": { - "distance": 400, - "size": 40, - "duration": 2, - "opacity": 8, - "speed": 3 + interactivity: { + detect_on: "canvas", + events: { + onhover: { + enable: true, + mode: "grab" + }, + onclick: { + enable: true, + mode: "push" + }, + resize: true + }, + modes: { + grab: { + distance: 200, + line_linked: { + opacity: 0.8 + } + }, + bubble: { + distance: 400, + size: 40, + duration: 2, + opacity: 8, + speed: 3 + }, + repulse: { + distance: 200, + duration: 0.4 + }, + push: { + particles_nb: 2 + }, + remove: { + particles_nb: 2 + } + } }, - "repulse": { - "distance": 200, - "duration": 0.4 - }, - "push": { - "particles_nb": 2 - }, - "remove": { - "particles_nb": 2 - } - } - }, - "retina_detect": true + retina_detect: true }); } } }); })(jQuery); +