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

fix mobile banner

Browse Source
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
.breakpoints({
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 980px)',
small: '(max-width: 736px)',
xsmall: '(max-width: 480px)'
xlarge: '(max-width: 1680px)',
large: '(max-width: 1280px)',
medium: '(max-width: 980px)',
small: '(max-width: 736px)',
xsmall: '(max-width: 480px)'
});
$(function() {
var $window = $(window),
var $window = $(window),
$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.setTimeout(function() {
$body.removeClass('is-loading');
}, 100);
});
$window.on('load', function() {
window.setTimeout(function() {
$body.removeClass('is-loading');
}, 100);
});
// 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');
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({
speed: 1500,
offset: $header.outerHeight()
});
$('.scrolly')
.scrolly({
speed: 1500,
offset: $header.outerHeight()
});
// Menu.
$('#menu')
.append('<a href="#menu" class="close"></a>')
.appendTo($body)
.panel({
delay: 500,
hideOnClick: true,
hideOnSwipe: true,
resetScroll: true,
resetForms: true,
side: 'right',
target: $body,
visibleClass: 'is-menu-visible'
});
$('#menu')
.append('<a href="#menu" class="close"></a>')
.appendTo($body)
.panel({
delay: 500,
hideOnClick: true,
hideOnSwipe: true,
resetScroll: true,
resetForms: true,
side: 'right',
target: $body,
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')) {
if ($banner.length > 0 &&
$header.hasClass('alt')) {
$window.on('resize', function() { $window.trigger('scroll'); });
$window.on('resize', function() {
$window.trigger('scroll');
});
$banner.scrollex({
bottom: $header.outerHeight() + 1,
terminate: function() { $header.removeClass('alt'); },
enter: function() { $header.addClass('alt'); },
leave: function() { $header.removeClass('alt'); }
});
$banner.scrollex({
bottom: $header.outerHeight() + 1,
terminate: function() {
$header.removeClass('alt');
},
enter: function() {
$header.addClass('alt');
},
leave: function() {
$header.removeClass('alt');
}
});
}
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS('banner', {
"particles": {
"number": {
"value": 250,
"density": {
"enable": false,
"value_area": 1122.388442605866
}
},
"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.5,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4.6,
"random": true,
"anim": {
"enable": false,
"speed": 6,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 133.99274002972194,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": false
});
}
if ($( window ).width() > 980) {
particlesJS('banner', {
"particles": {
"number": {
"value": 250,
"density": {
"enable": false,
"value_area": 1122.388442605866
}
},
"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.5,
"random": true,
"anim": {
"enable": true,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 4.6,
"random": true,
"anim": {
"enable": false,
"speed": 6,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 133.99274002972194,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 5
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": false
});
}
});
})(jQuery);

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

@ -1761,7 +1761,7 @@ body.is-mobile {
#banner,
.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-repeat: no-repeat;
background-size: cover;
@ -1829,6 +1829,7 @@ body {
}
.particle {
position: relative;
user-select: none;
#particles-js {
vertical-align: bottom;
@ -1851,5 +1852,6 @@ body {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
user-select: auto;
}
}