fix(plugin): make page rendering faster with animations
This commit is contained in:
parent
8c356afb62
commit
a785bd3b84
|
@ -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/)',
|
||||
|
|
|
@ -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') %>
|
||||
<% } %>
|
||||
<% } %>
|
|
@ -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}
|
||||
});
|
||||
|
|
|
@ -8,14 +8,14 @@
|
|||
my browser now </a></p>
|
||||
<p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">×</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>
|
||||
<% } %>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
(function () {
|
||||
function $() {
|
||||
return Array.prototype.slice.call(document.querySelectorAll.apply(document, arguments));
|
||||
}
|
||||
|
||||
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';
|
||||
}
|
||||
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;
|
||||
}
|
||||
})
|
||||
$('body > .navbar, body > .section, body > .footer').forEach(function (element) {
|
||||
element.style.transition = '0s';
|
||||
element.style.opacity = '0';
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: '.navbar-main',
|
||||
translateY: [-100, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 300,
|
||||
easing: 'easeOutSine'
|
||||
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++;
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
document.addEventListener("DOMContentLoaded", function () {
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
if (typeof ($.fn.lightGallery) === 'function') {
|
||||
$('.article').lightGallery({ selector: '.gallery-item' });
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue