diff --git a/src/assets/images/banner.jpg b/src/assets/images/banner.jpg index c5f9742..df6a7c5 100644 Binary files a/src/assets/images/banner.jpg and b/src/assets/images/banner.jpg differ diff --git a/src/assets/js/main.js b/src/assets/js/main.js index f7c029d..8fcfd78 100644 --- a/src/assets/js/main.js +++ b/src/assets/js/main.js @@ -5,7 +5,6 @@ */ (function($) { - skel .breakpoints({ xlarge: '(max-width: 1680px)', @@ -101,6 +100,119 @@ } }); + // Particles + if ($( window ).width() > 980) { + particlesJS('banner', { + "particles": { + "number": { + "value": 65, + "density": { + "enable": false, + "value_area": 800 + } + }, + "color": { + "value": "#29335C" + }, + "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": 16, + "random": true, + "anim": { + "enable": true, + "speed": 3, + "size_min": 10, + "sync": false + } + }, + "line_linked": { + "enable": true, + "distance": 250, + "color": "#29335C", + "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 + } + }, + "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 + } + } + }, + "retina_detect": true + }); + } } }); -})(jQuery); \ No newline at end of file +})(jQuery); diff --git a/src/assets/styles/components/_banner.scss b/src/assets/styles/components/_banner.scss index 6557b3d..c4fa00b 100644 --- a/src/assets/styles/components/_banner.scss +++ b/src/assets/styles/components/_banner.scss @@ -60,6 +60,16 @@ height: auto; min-height: 0; + .particles-js-canvas-el { + @include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out'); + @include vendor('transition-delay', '1s'); + opacity: 1; + + @include breakpoint(medium) { + display: none; + } + } + h2 { font-size: 1.25em; } @@ -84,5 +94,34 @@ body.is-loading { width: 0; } } + + .particles-js-canvas-el { + opacity: 0; + } } -} \ No newline at end of file +} + +.particle { + position: relative; + user-select: none; + background: _palette(accent3, bg); + + @include breakpoint(medium) { + background: none; + } + + .particles-js-canvas-el { + width: 100%; + height: 100%; + } + + .content { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + z-index: 1; + user-select: auto; + } +}