autonomic-cooperative
/
autonomic.zone
Archived
5
0
Fork 0
Code Issues 15 Pull Requests 2 Releases Activity

fix mobile banner

This commit is contained in:
czmj 2017-09-22 13:44:13 +01:00
parent 3d6de6fd33
commit 396e7b4574
3 changed files with 185 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/banner.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 487 KiB

After

Width:  |  Height:  |  Size: 146 KiB

355
src/assets/js/main.js
View File

@ -8,205 +8,212 @@
skel skel
.breakpoints({ .breakpoints({
xlarge: '(max-width: 1680px)', xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)', large: '(max-width: 1280px)',
medium: '(max-width: 980px)', medium: '(max-width: 980px)',
small: '(max-width: 736px)', small: '(max-width: 736px)',
xsmall: '(max-width: 480px)' xsmall: '(max-width: 480px)'
}); });
$(function() { $(function() {
var $window = $(window), var $window = $(window),
$body = $('body'), $body = $('body'),
$wrapper = $('#page-wrapper'), $wrapper = $('#page-wrapper'),
$banner = $('#banner'), $banner = $('#banner'),
$header = $('#header'); $header = $('#header');
// Disable animations/transitions until the page has loaded. // 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() { window.setTimeout(function() {
$body.removeClass('is-loading'); $body.removeClass('is-loading');
}, 100); }, 100);
}); });
// Mobile? // Mobile?
if (skel.vars.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'); $body.addClass('is-mobile');
else
skel
.on('-medium !medium', function() {
$body.removeClass('is-mobile');
})
.on('+medium', function() {
$body.addClass('is-mobile');
});
// Fix: Placeholder polyfill.
$('form').placeholder();
// Prioritize "important" elements on medium.
skel.on('+medium -medium', function() {
$.prioritize(
'.important\\28 medium\\29',
skel.breakpoint('medium').active
);
}); });
// Fix: Placeholder polyfill.
$('form').placeholder();
// Prioritize "important" elements on medium.
skel.on('+medium -medium', function() {
$.prioritize(
'.important\\28 medium\\29',
skel.breakpoint('medium').active
);
});
// Scrolly. // Scrolly.
$('.scrolly') $('.scrolly')
.scrolly({ .scrolly({
speed: 1500, speed: 1500,
offset: $header.outerHeight() offset: $header.outerHeight()
}); });
// Menu. // Menu.
$('#menu') $('#menu')
.append('<a href="#menu" class="close"></a>') .append('<a href="#menu" class="close"></a>')
.appendTo($body) .appendTo($body)
.panel({ .panel({
delay: 500, delay: 500,
hideOnClick: true, hideOnClick: true,
hideOnSwipe: true, hideOnSwipe: true,
resetScroll: true, resetScroll: true,
resetForms: true, resetForms: true,
side: 'right', side: 'right',
target: $body, target: $body,
visibleClass: 'is-menu-visible' visibleClass: 'is-menu-visible'
}); });
// Header. // Header.
if (skel.vars.IEVersion < 9) if (skel.vars.IEVersion < 9)
$header.removeClass('alt'); $header.removeClass('alt');
if ($banner.length > 0 if ($banner.length > 0 &&
&& $header.hasClass('alt')) { $header.hasClass('alt')) {
$window.on('resize', function() { $window.trigger('scroll'); }); $window.on('resize', function() {
$window.trigger('scroll');
});
$banner.scrollex({ $banner.scrollex({
bottom: $header.outerHeight() + 1, bottom: $header.outerHeight() + 1,
terminate: function() { $header.removeClass('alt'); }, terminate: function() {
enter: function() { $header.addClass('alt'); }, $header.removeClass('alt');
leave: function() { $header.removeClass('alt'); } },
}); enter: function() {
$header.addClass('alt');
},
leave: function() {
$header.removeClass('alt');
}
});
} }
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */ if ($( window ).width() > 980) {
particlesJS('banner', { particlesJS('banner', {
"particles": { "particles": {
"number": { "number": {
"value": 250, "value": 250,
"density": { "density": {
"enable": false, "enable": false,
"value_area": 1122.388442605866 "value_area": 1122.388442605866
} }
}, },
"color": { "color": {
"value": "#ffffff" "value": "#ffffff"
}, },
"shape": { "shape": {
"type": "circle", "type": "circle",
"stroke": { "stroke": {
"width": 0, "width": 0,
"color": "#000000" "color": "#000000"
}, },
"polygon": { "polygon": {
"nb_sides": 5 "nb_sides": 5
}, },
"image": { "image": {
"src": "img/github.svg", "src": "img/github.svg",
"width": 100, "width": 100,
"height": 100 "height": 100
} }
}, },
"opacity": { "opacity": {
"value": 0.5, "value": 0.5,
"random": true, "random": true,
"anim": { "anim": {
"enable": true, "enable": true,
"speed": 1, "speed": 1,
"opacity_min": 0.1, "opacity_min": 0.1,
"sync": false "sync": false
} }
}, },
"size": { "size": {
"value": 4.6, "value": 4.6,
"random": true, "random": true,
"anim": { "anim": {
"enable": false, "enable": false,
"speed": 6, "speed": 6,
"size_min": 0.1, "size_min": 0.1,
"sync": false "sync": false
} }
}, },
"line_linked": { "line_linked": {
"enable": true, "enable": true,
"distance": 150, "distance": 150,
"color": "#ffffff", "color": "#ffffff",
"opacity": 0.4, "opacity": 0.4,
"width": 1 "width": 1
}, },
"move": { "move": {
"enable": true, "enable": true,
"speed": 2, "speed": 2,
"direction": "none", "direction": "none",
"random": true, "random": true,
"straight": false, "straight": false,
"out_mode": "out", "out_mode": "out",
"bounce": false, "bounce": false,
"attract": { "attract": {
"enable": true, "enable": true,
"rotateX": 600, "rotateX": 600,
"rotateY": 1200 "rotateY": 1200
} }
} }
}, },
"interactivity": { "interactivity": {
"detect_on": "canvas", "detect_on": "canvas",
"events": { "events": {
"onhover": { "onhover": {
"enable": true, "enable": true,
"mode": "grab" "mode": "grab"
}, },
"onclick": { "onclick": {
"enable": true, "enable": true,
"mode": "push" "mode": "push"
}, },
"resize": true "resize": true
}, },
"modes": { "modes": {
"grab": { "grab": {
"distance": 133.99274002972194, "distance": 133.99274002972194,
"line_linked": { "line_linked": {
"opacity": 1 "opacity": 1
} }
}, },
"bubble": { "bubble": {
"distance": 400, "distance": 400,
"size": 40, "size": 40,
"duration": 2, "duration": 2,
"opacity": 8, "opacity": 8,
"speed": 3 "speed": 3
}, },
"repulse": { "repulse": {
"distance": 200, "distance": 200,
"duration": 0.4 "duration": 0.4
}, },
"push": { "push": {
"particles_nb": 4 "particles_nb": 5
}, },
"remove": { "remove": {
"particles_nb": 2 "particles_nb": 2
} }
} }
}, },
"retina_detect": false "retina_detect": false
}); });
}
}); });
})(jQuery); })(jQuery);

6
src/assets/styles/main.scss
View File

@ -1761,7 +1761,7 @@ body.is-mobile {
#banner, #banner,
.wrapper.style4 { .wrapper.style4 {
@include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../assets/images/banner.jpg")')); @include vendor('background-image', 'url("../../assets/images/banner.jpg")');
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
@ -1829,6 +1829,7 @@ body {
} }
.particle { .particle {
position: relative; position: relative;
user-select: none;
#particles-js { #particles-js {
vertical-align: bottom; vertical-align: bottom;
@ -1840,7 +1841,7 @@ body {
.particles-js-canvas-el { .particles-js-canvas-el {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
@ -1851,5 +1852,6 @@ body {
-webkit-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 1; z-index: 1;
user-select: auto;
} }
} }