Nofated095
/
hexo-theme-amane
mirror of https://github.com/Nofated095/hexo-theme-amane.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(plugin): make page rendering faster with animations

This commit is contained in:
ppoffice 2018-11-13 22:50:42 -05:00
parent 8c356afb62
commit a785bd3b84
7 changed files with 46 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
includes/specs/plugins.spec.js
View File

@ -3,6 +3,11 @@ const { doc, type, defaultValue } = require('../common/utils').descriptors;
module.exports = {
[type]: 'object',
[doc]: 'Other plugin settings',
animejs: {
[type]: 'boolean',
[doc]: 'Enable page animations',
[defaultValue]: true
},
gallery: {
[type]: 'boolean',
[doc]: 'Enable the lightGallery and Justified Gallery plugins (http://ppoffice.github.io/hexo-theme-icarus/2016/07/08/plugin/Gallery/)',
@ -13,11 +18,6 @@ module.exports = {
[doc]: 'Enable the Outdated Browser plugin (http://outdatedbrowser.com/)',
[defaultValue]: true
},
animejs: {
[type]: 'boolean',
[doc]: 'Enable page animations (http://animejs.com/)',
[defaultValue]: true
},
mathjax: {
[type]: 'boolean',
[doc]: 'Enable the MathJax plugin (http://ppoffice.github.io/hexo-theme-icarus/2018/01/01/plugin/MathJax/)',

5
layout/plugin/animejs.ejs
View File

@ -1,8 +1,7 @@
<% if (plugin !== false) { %>
<% if (head) { %>
<style>body>.navbar,body>.section,body>.footer{opacity: 0}</style>
<style>body>.footer,body>.navbar,body>.section{opacity:0}</style>
<% } else { %>
<%- _js(cdn('animejs', '2.2.0', 'anime.js'), true) %>
<%- _js('js/animation', true) %>
<%- _js('js/animation') %>
<% } %>
<% } %>

4
layout/plugin/mathjax.ejs
View File

@ -1,9 +1,9 @@
<% if (!head && plugin !== false) { %>
<%- _js(cdn('mathjax', '2.7.5', 'unpacked/MathJax.js?config=TeX-MML-AM_CHTML'), true) %>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener('DOMContentLoaded', function () {
MathJax.Hub.Config({
"HTML-CSS": {matchFontHeight: false},
'HTML-CSS': {matchFontHeight: false},
SVG: {matchFontHeight: false},
CommonHTML: {matchFontHeight: false}
});

4
layout/plugin/outdated-browser.ejs
View File

@ -8,14 +8,14 @@
my browser now </a></p>
<p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<%- _js(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js'), false, true) %>
<%- _js(cdn('outdatedbrowser', '1.1.5', 'outdatedbrowser/outdatedbrowser.min.js'), true) %>
<script>
document.addEventListener("DOMContentLoaded", function () {
outdatedBrowser({
bgColor: '#f25648',
color: '#ffffff',
lowerThan: 'flex'
})
});
});
</script>
<% } %>

1
source/css/style.styl
View File

@ -46,7 +46,6 @@ body, button, input, select, textarea
.card
overflow: hidden
border-radius: 4px
transform-origin: center top
box-shadow: 0 4px 10px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.1)
& + .card
margin-top: 1.5rem

68
source/js/animation.js
View File

@ -1,37 +1,37 @@
function isIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
var trident = ua.indexOf('Trident/');
return (msie > 0 || trident > 0);
}
document.addEventListener("DOMContentLoaded", function () {
var containers = document.querySelectorAll('body>.navbar,body>.section,body>.footer');
for (var i = 0; i < containers.length; i++) {
containers[i].style.opacity = '1';
(function () {
function $() {
return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments));
}
if (!isIE()) {
['.column-main > .card',
'.column-left > .card',
'.column-right > .card'].map(function (target) {
anime({
targets: target,
scale: [0.8, 1],
opacity: [0, 1],
duration: 300,
easing: 'easeOutSine',
delay: function (el, i, l) {
return i * 100;
}
})
});
anime({
targets: '.navbar-main',
translateY: [-100, 0],
opacity: [0, 1],
duration: 300,
easing: 'easeOutSine'
$('body > .navbar, body > .section, body > .footer').forEach(function (element) {
element.style.transition = '0s';
element.style.opacity = '0';
});
document.querySelector('body > .navbar').style.transform = 'translateY(-100px)';
['.column-main > .card', '.column-left > .card', '.column-right > .card'].map(function (selector) {
$(selector).forEach(function (element) {
element.style.transition = '0s';
element.style.opacity = '0';
element.style.transform = 'scale(0.8)';
element.style.transformOrigin = 'center top';
});
}
});
});
setTimeout(function () {
$('body > .navbar, body > .section, body > .footer').forEach(function (element) {
element.style.opacity = '1';
element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
});
document.querySelector('body > .navbar').style.transform = 'translateY(0)';
['.column-main > .card', '.column-left > .card', '.column-right > .card'].map(function (selector) {
var i = 1;
$(selector).forEach(function (element) {
setTimeout(function () {
element.style.opacity = '1';
element.style.transform = 'scale(1)';
element.style.transition = 'opacity 0.3s ease-out, transform 0.3s ease-out';
}, i * 100);
i++;
});
});
});
})();

2
source/js/gallery.js
View File

@ -1,4 +1,4 @@
document.addEventListener("DOMContentLoaded", function () {
document.addEventListener('DOMContentLoaded', function () {
if (typeof ($.fn.lightGallery) === 'function') {
$('.article').lightGallery({ selector: '.gallery-item' });
}