github/hexo-theme-next
1
0
Fork 0
mirror of https://github.com/next-theme/hexo-theme-next.git synced 2026-01-20 19:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Optimize logo-line animation

Browse Source
This commit is contained in:
Mimi 2020-06-19 01:18:31 +08:00
parent a1ee9a7e37
commit b34b8e5b98
5 changed files with 22 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
layout/_partials/header/brand.njk
View File

@ -15,9 +15,9 @@
{%- endif %} {%- endif %}
<a href="{{ config.root }}" class="brand" rel="start"> <a href="{{ config.root }}" class="brand" rel="start">
<span class="logo-line-before"><i></i></span> <i class="logo-line-before"></i>
<h1 class="site-title">{{ title }}</h1> <h1 class="site-title">{{ title }}</h1>
<span class="logo-line-after"><i></i></span> <i class="logo-line-after"></i>
</a> </a>
{%- if subtitle %} {%- if subtitle %}
<p class="site-subtitle" itemprop="description">{{ subtitle }}</p> <p class="site-subtitle" itemprop="description">{{ subtitle }}</p>

5
layout/_scripts/noscript.njk
View File

@ -16,8 +16,9 @@
top: initial; top: initial;
} }
.use-motion .logo-line-before i { left: initial; } .use-motion .logo-line-before, .use-motion .logo-line-after {
.use-motion .logo-line-after i { right: initial; } transform: scaleX(1);
}
.search-pop-overlay, .sidebar-nav { display: none; } .search-pop-overlay, .sidebar-nav { display: none; }
.sidebar-panel { display: block; } .sidebar-panel { display: block; }

20
source/css/_schemes/Mist/_header.styl
View File

@ -32,30 +32,26 @@
} }
.logo-line-before, .logo-line-after { .logo-line-before, .logo-line-after {
background: var(--brand-color);
display: block; display: block;
height: 2px;
margin: 0 auto; margin: 0 auto;
overflow: hidden;
width: 75%; width: 75%;
+mobile() { +mobile() {
display: none; display: none;
} }
i {
background: var(--brand-color);
display: block;
height: 2px;
position: relative;
}
} }
.use-motion { .use-motion {
.logo-line-before i { .logo-line-before {
left: -100%; transform-origin: left;
transform: scaleX(0);
} }
.logo-line-after i { .logo-line-after {
right: -100%; transform-origin: right;
transform: scaleX(0);
} }
} }

1
source/css/_schemes/Pisces/_sidebar.styl
View File

@ -1,4 +1,5 @@
.sidebar { .sidebar {
background: initial;
bottom: initial; bottom: initial;
box-shadow: none; box-shadow: none;
margin-top: $sidebar-offset; margin-top: $sidebar-offset;

19
source/js/motion.js
View File

@ -33,8 +33,8 @@ NexT.motion.middleWares = {
const image = document.querySelector('.custom-logo-image'); const image = document.querySelector('.custom-logo-image');
const title = document.querySelector('.site-title'); const title = document.querySelector('.site-title');
const subtitle = document.querySelector('.site-subtitle'); const subtitle = document.querySelector('.site-subtitle');
const logoLineTop = document.querySelector('.logo-line-before i'); const logoLineTop = document.querySelector('.logo-line-before');
const logoLineBottom = document.querySelector('.logo-line-after i'); const logoLineBottom = document.querySelector('.logo-line-after');
brand && sequence.push({ brand && sequence.push({
e: brand, e: brand,
@ -42,10 +42,11 @@ NexT.motion.middleWares = {
o: {duration: 200} o: {duration: 200}
}); });
function getMistLineSettings(element, translateX) { function getMistLineSettings(element) {
Velocity.hook(element, 'scaleX', 0);
return { return {
e: element, e: element,
p: {translateX}, p: {scaleX: 1},
o: { o: {
duration : 500, duration : 500,
sequenceQueue: false sequenceQueue: false
@ -63,8 +64,8 @@ NexT.motion.middleWares = {
CONFIG.scheme === 'Mist' && logoLineTop && logoLineBottom CONFIG.scheme === 'Mist' && logoLineTop && logoLineBottom
&& sequence.push( && sequence.push(
getMistLineSettings(logoLineTop, '100%'), getMistLineSettings(logoLineTop),
getMistLineSettings(logoLineBottom, '-100%') getMistLineSettings(logoLineBottom)
); );
CONFIG.scheme === 'Muse' && image && pushImageToSequence(); CONFIG.scheme === 'Muse' && image && pushImageToSequence();
@ -165,11 +166,7 @@ NexT.motion.middleWares = {
if (sidebarAffixTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) { if (sidebarAffixTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
Velocity(sidebarAffix, 'transition.' + sidebarAffixTransition, { Velocity(sidebarAffix, 'transition.' + sidebarAffixTransition, {
display : null, display : null,
duration: 200, duration: 200
complete: function() {
// After motion complete need to remove transform from sidebar to let affix work on Pisces | Gemini.
sidebarAffix.style.transform = 'initial';
}
}); });
} }
integrator.next(); integrator.next();