mirror of
https://github.com/jerryc127/hexo-theme-butterfly.git
synced 2026-04-08 12:07:06 +08:00
feat: note 標籤優化(可自定義icon圖標/可覆蓋配置中的style)
feat: 增加部分特效 Mobile設置（activate_power_mode/fireworks/click_heart/ClickShowText) feat: aside 分類 收縮/展開 增加slide效果 improvement: 更改canvas_ribbon_piao 為 canvas_fluttering_ribbon improvement: darkmode 字體顔色加深 improvement: 優化nav的進入，應該修復一些用户在本地測試中無法顯示nav的bugs improvement: 部分css和html優化 fix: 修復鼠標點擊文字特效，文字過長導致頁面有滾動條的bugs remove: 移除anime js， 集成在fireworks的js裏 remove: 刪除特效js,改為cdn引入
This commit is contained in:
Jerry
@@ -16,6 +16,8 @@ Based on [hexo-theme-melody](https://github.com/Molunerfinn/hexo-theme-melody) t
|
||||
|
||||
### GIT
|
||||
|
||||
> If you are in Mainland China, you can download in [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)
|
||||
|
||||
Stable branch [recommend]:
|
||||
|
||||
```
|
||||
|
||||
@@ -17,6 +17,8 @@
|
||||
|
||||
### Git 安裝
|
||||
|
||||
> 本倉庫同時上傳到 [Gitee](https://gitee.com/iamjerryw/hexo-theme-butterfly)，如果你訪問 Github 緩慢，可從 Gitee 中下載。
|
||||
|
||||
在博客根目錄裡安裝穩定版【推薦】
|
||||
|
||||
```powershell
|
||||
|
||||
26
_config.yml
26
_config.yml
@@ -510,8 +510,8 @@ canvas_ribbon:
|
||||
click_to_change: false
|
||||
mobile: false
|
||||
|
||||
# Dynamic ribbon (動態彩帶)
|
||||
canvas_ribbon_piao:
|
||||
# Fluttering Ribbon (動態彩帶)
|
||||
canvas_fluttering_ribbon:
|
||||
enable: false
|
||||
mobile: false
|
||||
|
||||
@@ -531,14 +531,18 @@ activate_power_mode:
|
||||
enable: false
|
||||
colorful: true # open particle animation (冒光特效)
|
||||
shake: true # open shake (抖動特效)
|
||||
mobile: false
|
||||
|
||||
# Mouse click effects: fireworks (鼠標點擊效果: 煙火特效)
|
||||
fireworks:
|
||||
enable: false
|
||||
zIndex: 9999 # -1 or 9999
|
||||
mobile: false
|
||||
|
||||
# Mouse click effects: Heart symbol (鼠標點擊效果: 愛心)
|
||||
click_heart: false
|
||||
click_heart:
|
||||
enable: false
|
||||
mobile: false
|
||||
|
||||
# Mouse click effects: words (鼠標點擊效果: 文字)
|
||||
ClickShowText:
|
||||
@@ -548,6 +552,7 @@ ClickShowText:
|
||||
# - LOVE
|
||||
# - YOU
|
||||
fontSize: 15px
|
||||
mobile: false
|
||||
|
||||
# Default display mode (網站默認的顯示模式)
|
||||
# light (default) / dark
|
||||
@@ -862,9 +867,9 @@ CDN:
|
||||
busuanzi: //busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js
|
||||
|
||||
# background effect
|
||||
canvas_ribbon: /js/third-party/canvas-ribbon.js
|
||||
canvas_ribbon_piao: /js/third-party/piao.js
|
||||
canvas_nest: /js/third-party/canvas-nest.js
|
||||
canvas_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-ribbon.min.js
|
||||
canvas_fluttering_ribbon: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js
|
||||
canvas_nest: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-nest.min.js
|
||||
|
||||
lazyload: https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js
|
||||
instantpage: https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js
|
||||
@@ -881,11 +886,10 @@ CDN:
|
||||
snackbar: https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js
|
||||
|
||||
# effect
|
||||
anime: https://cdn.jsdelivr.net/npm/animejs@latest/anime.min.js
|
||||
activate_power_mode: /js/third-party/activate-power-mode.js
|
||||
fireworks: /js/third-party/fireworks.js
|
||||
click_heart: /js/third-party/click_heart.js
|
||||
ClickShowText: /js/third-party/ClickShowText.js
|
||||
activate_power_mode: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/activate-power-mode.min.js
|
||||
fireworks: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/fireworks.min.js
|
||||
click_heart: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js
|
||||
ClickShowText: https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-show-text.min.js
|
||||
|
||||
# fontawesome
|
||||
fontawesome: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css
|
||||
|
||||
11
layout/includes/third-party/comments/valine.pug
vendored
11
layout/includes/third-party/comments/valine.pug
vendored
@@ -5,7 +5,7 @@ if site.data.valine
|
||||
script.
|
||||
function loadValine () {
|
||||
function initValine () {
|
||||
window.valine = new Valine({
|
||||
const initData = {
|
||||
el: '#vcomment',
|
||||
appId: '#{theme.valine.appId}',
|
||||
appKey: '#{theme.valine.appKey}',
|
||||
@@ -20,8 +20,13 @@ script.
|
||||
emojiMaps: !{emojiMaps},
|
||||
enableQQ: #{theme.valine.enableQQ},
|
||||
path: window.location.pathname,
|
||||
});
|
||||
if ('#{theme.valine.requiredFields}') { valine.config.requiredFields= '#{theme.valine.requiredFields}'.split(',') }
|
||||
}
|
||||
|
||||
if (!{Boolean(theme.valine.requiredFields)}) {
|
||||
initData.requiredFields= ('!{theme.valine.requiredFields}'.split(','))
|
||||
}
|
||||
|
||||
const valine = new Valine(initData)
|
||||
}
|
||||
|
||||
if (typeof Valine === 'function') initValine()
|
||||
|
||||
14
layout/includes/third-party/effect.pug
vendored
14
layout/includes/third-party/effect.pug
vendored
@@ -1,14 +1,13 @@
|
||||
if theme.fireworks && theme.fireworks.enable
|
||||
canvas.fireworks
|
||||
script(src=url_for(theme.CDN.anime))
|
||||
canvas.fireworks(mobile=`${theme.fireworks.mobile}`)
|
||||
script(src=url_for(theme.CDN.fireworks))
|
||||
|
||||
if (theme.canvas_ribbon && theme.canvas_ribbon.enable)
|
||||
script(defer id="ribbon" src=url_for(theme.CDN.canvas_ribbon) size=theme.canvas_ribbon.size
|
||||
alpha=theme.canvas_ribbon.alpha zIndex=theme.canvas_ribbon.zIndex mobile=`${theme.canvas_ribbon.mobile}` data-click=`${theme.canvas_ribbon.click_to_change}`)
|
||||
|
||||
if (theme.canvas_ribbon_piao && theme.canvas_ribbon_piao.enable)
|
||||
script(defer id="ribbon_piao" mobile=`${theme.canvas_ribbon_piao.mobile}` src=url_for(theme.CDN.canvas_ribbon_piao))
|
||||
if (theme.canvas_fluttering_ribbon && theme.canvas_fluttering_ribbon.enable)
|
||||
script(defer id="fluttering_ribbon" mobile=`${theme.canvas_fluttering_ribbon.mobile}` src=url_for(theme.CDN.canvas_fluttering_ribbon))
|
||||
|
||||
if (theme.canvas_nest && theme.canvas_nest.enable)
|
||||
script#canvas_nest(defer color=theme.canvas_nest.color opacity=theme.canvas_nest.opacity zIndex=theme.canvas_nest.zIndex count=theme.canvas_nest.count mobile=`${theme.canvas_nest.mobile}` src=url_for(theme.CDN.canvas_nest))
|
||||
@@ -18,11 +17,12 @@ if theme.activate_power_mode.enable
|
||||
script.
|
||||
POWERMODE.colorful = !{theme.activate_power_mode.colorful};
|
||||
POWERMODE.shake = !{theme.activate_power_mode.shake};
|
||||
POWERMODE.mobile = !{theme.activate_power_mode.mobile};
|
||||
document.body.addEventListener('input', POWERMODE);
|
||||
|
||||
//- 鼠標特效
|
||||
if theme.click_heart
|
||||
script(src=url_for(theme.CDN.click_heart) async)
|
||||
if theme.click_heart && theme.click_heart.enable
|
||||
script#click-heart(src=url_for(theme.CDN.click_heart) async mobile=`${theme.click_heart.mobile}`)
|
||||
|
||||
if theme.ClickShowText && theme.ClickShowText.enable
|
||||
script(src=url_for(theme.CDN.ClickShowText) async)
|
||||
script#click-show-text(src=url_for(theme.CDN.ClickShowText) async mobile=`${theme.ClickShowText.mobile}`)
|
||||
|
||||
@@ -38,7 +38,7 @@ script.
|
||||
result += '<div class=\'aside-list-item\'>'
|
||||
|
||||
if (!{theme.newest_comments.avatar}) {
|
||||
result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}'></a>`
|
||||
result += `<a href='${array[i].url}' class='thumbnail'><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
|
||||
}
|
||||
|
||||
result += `<div class='content'>
|
||||
|
||||
@@ -37,7 +37,7 @@ script.
|
||||
result += '<div class=\'aside-list-item\'>'
|
||||
|
||||
if (!{theme.newest_comments.avatar}) {
|
||||
result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}'></a>`
|
||||
result += `<a href='${array[i].url}' class="thumbnail"><img src='${array[i].avatar}' alt='${array[i].nick}'></a>`
|
||||
}
|
||||
|
||||
result += `<div class='content'>
|
||||
|
||||
@@ -28,7 +28,7 @@ script.
|
||||
result += '<div class=\'aside-list-item\'>'
|
||||
|
||||
if (!{theme.newest_comments.avatar}) {
|
||||
result += `<a href='${array[i].url}' class="thumbnail"><img src='${getIcon(array[i].avatar, array[i].mail)}'></a>`
|
||||
result += `<a href='${array[i].url}' class="thumbnail"><img src='${getIcon(array[i].avatar, array[i].mail)}' alt='${array[i].nick}'></a>`
|
||||
}
|
||||
|
||||
result += `<div class='content'>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "hexo-theme-butterfly",
|
||||
"version": "3.2.0-b1",
|
||||
"version": "3.2.0-b2",
|
||||
"description": "A Simple and Card UI Design theme for Hexo",
|
||||
"main": "package.json",
|
||||
"scripts": {
|
||||
|
||||
@@ -1,12 +1,26 @@
|
||||
/**
|
||||
* note.js
|
||||
* transplant from hexo-theme-next
|
||||
* Modify by Jerry
|
||||
*/
|
||||
|
||||
'use strict'
|
||||
|
||||
function postNote (args, content) {
|
||||
return `<div class="note ${args.join(' ')}">${hexo.render.renderSync({ text: content, engine: 'markdown' })}</div>`
|
||||
const styleConfig = hexo.theme.config.note.style
|
||||
const lastArgs = args[args.length - 1]
|
||||
if (!(lastArgs === 'flat' || lastArgs === 'modern' || lastArgs === 'simple' || lastArgs === 'disabled')) {
|
||||
args.push(styleConfig)
|
||||
}
|
||||
|
||||
let icon = ''
|
||||
const iconArray = args[args.length - 2]
|
||||
if (iconArray && iconArray.startsWith('fa')) {
|
||||
icon = `<i class="note-icon ${iconArray}"></i>`
|
||||
args[args.length - 2] = 'icon'
|
||||
}
|
||||
|
||||
return `<div class="note ${args.join(' ')}">${icon + hexo.render.renderSync({ text: content, engine: 'markdown' })}</div>`
|
||||
}
|
||||
|
||||
hexo.extend.tag.register('note', postNote, { ends: true })
|
||||
|
||||
@@ -226,6 +226,10 @@ _:future,
|
||||
#menus
|
||||
padding-right: 0 !important
|
||||
|
||||
&.show
|
||||
opacity: 1
|
||||
animation: headerNoOpacity 1s
|
||||
|
||||
#blog_name
|
||||
flex: 1
|
||||
|
||||
|
||||
@@ -1,32 +1,32 @@
|
||||
if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
|
||||
[data-theme='dark']
|
||||
--global-bg: darken(#121212, 2)
|
||||
--font-color: alpha(#FFFFFF, .6)
|
||||
--hr-border: alpha(#FFFFFF, .3)
|
||||
--hr-before-color: alpha(#FFFFFF, .6)
|
||||
--font-color: alpha(#FFFFFF, .7)
|
||||
--hr-border: alpha(#FFFFFF, .4)
|
||||
--hr-before-color: alpha(#FFFFFF, .7)
|
||||
--search-bg: #121212
|
||||
--search-input-color: alpha(#FFFFFF, .6)
|
||||
--search-result-title: alpha(#FFFFFF, .8)
|
||||
--search-input-color: alpha(#FFFFFF, .7)
|
||||
--search-result-title: alpha(#FFFFFF, .9)
|
||||
--preloader-bg: darken(#121212, 2)
|
||||
--preloader-color: alpha(#FFFFFF, .6)
|
||||
--preloader-color: alpha(#FFFFFF, .7)
|
||||
--tab-border-color: #2c2c2c
|
||||
--tab-botton-bg: #2c2c2c
|
||||
--tab-botton-color: alpha(#FFFFFF, .6)
|
||||
--tab-botton-color: alpha(#FFFFFF, .7)
|
||||
--tab-button-hover-bg: lighten(#121212, 15)
|
||||
--tab-button-active-bg: #121212
|
||||
--card-bg: #121212
|
||||
--sidebar-bg: #121212
|
||||
--btn-hover-color: lighten(#121212, 40)
|
||||
--btn-color: alpha(#FFFFFF, .6)
|
||||
--btn-color: alpha(#FFFFFF, .7)
|
||||
--btn-bg: lighten(#121212, 5)
|
||||
--text-bg-hover: lighten(#121212, 15)
|
||||
--light-grey: alpha(#FFFFFF, .6)
|
||||
--white: alpha(#FFFFFF, .8)
|
||||
--text-highlight-color: alpha(#FFFFFF, .8)
|
||||
--blockquote-color: alpha(#FFFFFF, .6)
|
||||
--light-grey: alpha(#FFFFFF, .7)
|
||||
--white: alpha(#FFFFFF, .9)
|
||||
--text-highlight-color: alpha(#FFFFFF, .9)
|
||||
--blockquote-color: alpha(#FFFFFF, .7)
|
||||
--blockquote-bg: lighten(#121212, 10)
|
||||
--reward-pop: lighten(#121212, 10)
|
||||
--sidebar-icon-color: alpha(#FFFFFF, .6)
|
||||
--sidebar-icon-color: alpha(#FFFFFF, .7)
|
||||
|
||||
// 網站背景，footer背景
|
||||
#web_bg[data-type=color]
|
||||
@@ -76,7 +76,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
|
||||
pre,
|
||||
.highlight:not(.js-file-line-container)
|
||||
background-color: lighten(#121212, 2) !important
|
||||
color: alpha(#FFFFFF, .6) !important
|
||||
color: alpha(#FFFFFF, .7) !important
|
||||
|
||||
figure.highlight
|
||||
box-shadow: none
|
||||
@@ -86,7 +86,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
|
||||
background: lighten(#121212, 5)
|
||||
|
||||
.line:before
|
||||
color: alpha(#FFFFFF, .6) !important
|
||||
color: alpha(#FFFFFF, .7) !important
|
||||
|
||||
.hljs
|
||||
background-color: lighten(#121212, 2) !important
|
||||
@@ -104,12 +104,12 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
|
||||
background: #2c2c2c !important
|
||||
|
||||
label
|
||||
filter: brightness(.7)
|
||||
filter: brightness(.8)
|
||||
|
||||
// note
|
||||
if hexo-config('note.style') == 'modern' || hexo-config('note.style') == 'flat'
|
||||
.note
|
||||
filter: brightness(.7)
|
||||
filter: brightness(.8)
|
||||
|
||||
// hide-tags
|
||||
.hide-button,
|
||||
@@ -121,7 +121,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
|
||||
img,
|
||||
.gist,
|
||||
.aplayer
|
||||
filter: brightness(.7)
|
||||
filter: brightness(.8)
|
||||
|
||||
#aside_content .aside-list > .aside-list-item:not(:last-child)
|
||||
border-bottom: 1px dashed alpha(#FFFFFF, .1)
|
||||
@@ -131,7 +131,7 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
|
||||
#hexo-blog-encrypt
|
||||
label,
|
||||
input
|
||||
color: alpha(#FFFFFF, .6) !important
|
||||
color: alpha(#FFFFFF, .7) !important
|
||||
|
||||
input
|
||||
background-color: #121212
|
||||
@@ -141,24 +141,24 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
|
||||
filter: brightness(.8)
|
||||
|
||||
svg
|
||||
fill: alpha(#FFFFFF, .8) !important
|
||||
fill: alpha(#FFFFFF, .9) !important
|
||||
|
||||
// Disqus and Disqusjs
|
||||
#disqus_thread
|
||||
#dsqjs
|
||||
.dsqjs-tab-active,
|
||||
.dsqjs-no-comment
|
||||
color: alpha(#FFFFFF, .6)
|
||||
color: alpha(#FFFFFF, .7)
|
||||
|
||||
.dsqjs-order-label
|
||||
background-color: lighten(#121212, 5)
|
||||
|
||||
.dsqjs-post-body
|
||||
color: alpha(#FFFFFF, .6)
|
||||
color: alpha(#FFFFFF, .7)
|
||||
|
||||
code,
|
||||
pre
|
||||
background: #2c2c2c
|
||||
|
||||
blockquote
|
||||
color: alpha(#FFFFFF, .6)
|
||||
color: alpha(#FFFFFF, .7)
|
||||
|
||||
@@ -32,9 +32,9 @@
|
||||
&:hover
|
||||
text-decoration: none
|
||||
|
||||
for $type in $btn-types
|
||||
for $type in $tagsP-types
|
||||
&.{$type}
|
||||
background-color: lookup('$btn-' + $type + '-color')
|
||||
background-color: lookup('$tagsP-' + $type + '-color')
|
||||
|
||||
&.outline
|
||||
border: 1px solid transparent
|
||||
@@ -49,10 +49,10 @@
|
||||
&:hover
|
||||
color: white !important
|
||||
|
||||
for $type in $btn-types
|
||||
for $type in $tagsP-types
|
||||
&.{$type}
|
||||
border-color: lookup('$btn-' + $type + '-color')
|
||||
color: lookup('$btn-' + $type + '-color')
|
||||
border-color: lookup('$tagsP-' + $type + '-color')
|
||||
color: lookup('$tagsP-' + $type + '-color')
|
||||
|
||||
&.button--animated:before
|
||||
background: lookup('$btn-' + $type + '-color')
|
||||
background: lookup('$tagsP-' + $type + '-color')
|
||||
|
||||
@@ -1,28 +1,51 @@
|
||||
.note
|
||||
$note-icons = hexo-config('note.icons')
|
||||
$note-style = hexo-config('note.style')
|
||||
position: relative
|
||||
margin: 0 0 1rem
|
||||
padding: 15px
|
||||
|
||||
if ($note-style == 'simple')
|
||||
if hexo-config('note.border_radius') is a 'unit'
|
||||
border-radius: unit(hexo-config('note.border_radius'), px)
|
||||
|
||||
&.icon
|
||||
padding-left: 2.25rem
|
||||
|
||||
& > .note-icon
|
||||
position: absolute
|
||||
top: calc(50% - .4rem)
|
||||
left: .7rem
|
||||
font-size: larger
|
||||
|
||||
for $type in $tagsP-types
|
||||
&.{$type}
|
||||
&:not(.disabled)
|
||||
border-left-color: lookup('$tagsP-' + $type + '-color') !important
|
||||
|
||||
&.modern
|
||||
border-left-color: transparent !important
|
||||
color: lookup('$tagsP-' + $type + '-color')
|
||||
|
||||
&:not(.simple)
|
||||
background: lighten(lookup('$tagsP-' + $type + '-color'), 80%) !important
|
||||
|
||||
& > .note-icon
|
||||
color: lookup('$tagsP-' + $type + '-color')
|
||||
|
||||
&.simple
|
||||
border: 1px solid #EEEEEE
|
||||
border-left-width: 5px
|
||||
|
||||
if ($note-style == 'modern')
|
||||
border: 1px solid transparent
|
||||
&.modern
|
||||
border: 1px solid transparent !important
|
||||
background-color: #f5f5f5
|
||||
color: $font-black
|
||||
|
||||
if ($note-style == 'flat')
|
||||
&.flat
|
||||
border: initial
|
||||
border-left: 5px solid #EEEEEE
|
||||
background-color: lighten(#EEEEEE, 65%)
|
||||
color: $font-black
|
||||
|
||||
if hexo-config('note.border_radius') is a 'unit'
|
||||
border-radius: unit(hexo-config('note.border_radius'), px)
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
@@ -52,21 +75,21 @@
|
||||
|
||||
if $note-icons
|
||||
&:not(.no-icon)
|
||||
padding-left: 45px
|
||||
padding-left: 2.25rem
|
||||
|
||||
&::before
|
||||
position: absolute
|
||||
top: 13px
|
||||
left: 15px
|
||||
top: calc(50% - .8rem)
|
||||
left: .7rem
|
||||
font-size: larger
|
||||
@extend .fontawesomeIcon
|
||||
|
||||
for $type in $note-types
|
||||
&.{$type}
|
||||
if ($note-style == 'flat')
|
||||
&.flat
|
||||
background: lookup('$note-' + $type + '-bg')
|
||||
|
||||
if ($note-style == 'modern')
|
||||
&.modern
|
||||
border-color: lookup('$note-modern-' + $type + '-border')
|
||||
background: lookup('$note-modern-' + $type + '-bg')
|
||||
color: lookup('$note-modern-' + $type + '-text')
|
||||
@@ -78,7 +101,7 @@
|
||||
&:hover
|
||||
color: lookup('$note-modern-' + $type + '-hover')
|
||||
|
||||
if ($note-style != 'modern')
|
||||
&:not(.modern)
|
||||
border-left-color: lookup('$note-' + $type + '-border')
|
||||
|
||||
h2,
|
||||
@@ -89,8 +112,10 @@
|
||||
color: lookup('$note-' + $type + '-text')
|
||||
|
||||
if $note-icons
|
||||
&:not(.no-icon)::before
|
||||
content: lookup('$note-' + $type + '-icon')
|
||||
&:not(.no-icon)
|
||||
&::before
|
||||
content: lookup('$note-' + $type + '-icon')
|
||||
|
||||
if ($note-style != 'modern')
|
||||
color: lookup('$note-' + $type + '-text')
|
||||
&:not(.modern)
|
||||
&::before
|
||||
color: lookup('$note-' + $type + '-text')
|
||||
|
||||
@@ -160,16 +160,16 @@ $note-modern-danger-border = #ebcdd2
|
||||
$note-modern-danger-bg = lighten(spin($note-modern-danger-border, 10), 35% + ($lbg * 4))
|
||||
$note-modern-danger-text = #a94442
|
||||
$note-modern-danger-hover = darken(spin($note-modern-danger-text, -10), 22%)
|
||||
// Tag Plugins - Button
|
||||
$btn-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
|
||||
// Tag Plugins - Button/note
|
||||
$tagsP-types = 'blue' 'pink' 'red' 'purple' 'orange' 'green'
|
||||
$btn-color = #fff
|
||||
$btn-default-color = #777
|
||||
$btn-blue-color = #428bca
|
||||
$btn-pink-color = #FF69B4
|
||||
$btn-red-color = #FF0000
|
||||
$btn-orange-color = #FF8C00
|
||||
$btn-purple-color = #6f42c1
|
||||
$btn-green-color = #5cb85c
|
||||
$tagsP-blue-color = #428bca
|
||||
$tagsP-pink-color = #FF69B4
|
||||
$tagsP-red-color = #FF0000
|
||||
$tagsP-orange-color = #FF8C00
|
||||
$tagsP-purple-color = #6f42c1
|
||||
$tagsP-green-color = #5cb85c
|
||||
// Tag Plugins - Tab
|
||||
$tab-border-color = #f0f0f0
|
||||
$tab-botton-bg = #f0f0f0
|
||||
|
||||
@@ -29,7 +29,7 @@ $(function () {
|
||||
const initAdjust = () => {
|
||||
if (window.innerWidth < 768) adjustMenu(0)
|
||||
else adjustMenu(2)
|
||||
$('#nav').css({ opacity: '1', animation: 'headerNoOpacity 1s' })
|
||||
$('#nav').addClass('show')
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -725,20 +725,19 @@ $(function () {
|
||||
const $cardCategory = $('#aside-cat-list .card-category-list-item.parent i')
|
||||
$cardCategory.on('click', function (e) {
|
||||
e.preventDefault()
|
||||
const $this = $(this)
|
||||
$this.toggleClass('expand')
|
||||
$this.parents('.parent').next().toggle()
|
||||
$(this).toggleClass('expand').parents('.parent').next().slideToggle(300)
|
||||
})
|
||||
}
|
||||
|
||||
const switchComments = function () {
|
||||
let switchDone = false
|
||||
$('#switch-comments-btn').on('click', function () {
|
||||
$('#post-comment > .comment-wrap > div').each(function () {
|
||||
if ($(this).is(':visible')) {
|
||||
$(this).hide()
|
||||
$('#post-comment > .comment-wrap > div').each(function (i, o) {
|
||||
const $this = $(o)
|
||||
if ($this.is(':visible')) {
|
||||
$this.hide()
|
||||
} else {
|
||||
$(this).css({
|
||||
$this.css({
|
||||
display: 'block',
|
||||
animation: 'tabshow .5s'
|
||||
})
|
||||
|
||||
42
source/js/third-party/ClickShowText.js
vendored
42
source/js/third-party/ClickShowText.js
vendored
@@ -1,42 +0,0 @@
|
||||
function co(){
|
||||
var colorElements = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
|
||||
var colorArray = colorElements.split(",");
|
||||
var color ="#";
|
||||
for(var i =0;i<6;i++){
|
||||
color+=colorArray[Math.floor(Math.random()*16)];
|
||||
}
|
||||
return color;
|
||||
};
|
||||
var a_idx = 0;
|
||||
jQuery(document).ready(function($) {
|
||||
$("body").click(function (e) {
|
||||
|
||||
var config = GLOBAL_CONFIG.ClickShowText;
|
||||
|
||||
/*这个数组中的每一个字符是你要浮动显示的词或句子，每次点击鼠标后按顺序出现*/
|
||||
var a = config.text.split(",");
|
||||
var $i = $("<span/>").text(a[a_idx]);
|
||||
a_idx = (a_idx + 1) % a.length;
|
||||
var x = e.pageX,
|
||||
y = e.pageY;
|
||||
$i.css({
|
||||
"z-index": 150,
|
||||
"top": y - 20,
|
||||
"left": x -40,
|
||||
"position": "absolute",
|
||||
"font-weight": "bold",
|
||||
"color": co(),
|
||||
"cursor": "default",
|
||||
"font-size": config.fontSize || "inherit"
|
||||
});
|
||||
$("body").append($i);
|
||||
$i.animate({
|
||||
"top": y - 180,
|
||||
"opacity": 0
|
||||
},
|
||||
1500,
|
||||
function() {
|
||||
$i.remove();
|
||||
});
|
||||
});
|
||||
});
|
||||
1
source/js/third-party/activate-power-mode.js
vendored
1
source/js/third-party/activate-power-mode.js
vendored
@@ -1 +0,0 @@
|
||||
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.POWERMODE=e():t.POWERMODE=e()}(this,(function(){return function(t){var e={};function o(n){if(e[n])return e[n].exports;var r=e[n]={exports:{},id:n,loaded:!1};return t[n].call(r.exports,r,r.exports,o),r.loaded=!0,r.exports}return o.m=t,o.c=e,o.p="",o(0)}([function(t,e,o){"use strict";var n=document.createElement("canvas");n.width=window.innerWidth,n.height=window.innerHeight,n.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999",window.addEventListener("resize",(function(){n.width=window.innerWidth,n.height=window.innerHeight})),document.body.appendChild(n);var r=n.getContext("2d"),i=[],a=0,d=!1;function l(t,e){return Math.random()*(e-t)+t}function c(t){if(p.colorful){var e=l(0,360);return"hsla("+l(e-10,e+10)+", 100%, "+l(50,80)+"%, 1)"}return window.getComputedStyle(t).color}function u(t,e,o){return{x:t,y:e,alpha:1,color:o,velocity:{x:2*Math.random()-1,y:2*Math.random()-3.5}}}function p(){for(var t=function(){var t,e=document.activeElement;if("TEXTAREA"===e.tagName||"INPUT"===e.tagName&&"text"===e.getAttribute("type")){var n=o(1)(e,e.selectionEnd);return t=e.getBoundingClientRect(),{x:n.left+t.left,y:n.top+t.top,color:c(e)}}var r=window.getSelection();if(r.rangeCount){var i=r.getRangeAt(0),a=i.startContainer;return a.nodeType===document.TEXT_NODE&&(a=a.parentNode),{x:(t=i.getBoundingClientRect()).left,y:t.top,color:c(a)}}return{x:0,y:0,color:"transparent"}}(),e=5+Math.round(10*Math.random());e--;)i[a]=u(t.x,t.y,t.color),a=(a+1)%500;if(p.shake){var n=1+2*Math.random(),r=n*(Math.random()>.5?-1:1),l=n*(Math.random()>.5?-1:1);document.body.style.marginLeft=r+"px",document.body.style.marginTop=l+"px",setTimeout((function(){document.body.style.marginLeft="",document.body.style.marginTop=""}),75)}d||requestAnimationFrame(f)}function f(){d=!0,r.clearRect(0,0,n.width,n.height);for(var t=!1,e=n.getBoundingClientRect(),o=0;o<i.length;++o){var a=i[o];a.alpha<=.1||(a.velocity.y+=.075,a.x+=a.velocity.x,a.y+=a.velocity.y,a.alpha*=.96,r.globalAlpha=a.alpha,r.fillStyle=a.color,r.fillRect(Math.round(a.x-1.5)-e.left,Math.round(a.y-1.5)-e.top,3,3),t=!0)}t?requestAnimationFrame(f):d=!1}p.shake=!0,p.colorful=!1,t.exports=p},function(t,e){!function(){var e=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"],o=null!=window.mozInnerScreenX;function n(t,n,r){var i=r&&r.debug||!1;if(i){var a=document.querySelector("#input-textarea-caret-position-mirror-div");a&&a.parentNode.removeChild(a)}var d=document.createElement("div");d.id="input-textarea-caret-position-mirror-div",document.body.appendChild(d);var l=d.style,c=window.getComputedStyle?getComputedStyle(t):t.currentStyle;l.whiteSpace="pre-wrap","INPUT"!==t.nodeName&&(l.wordWrap="break-word"),l.position="absolute",i||(l.visibility="hidden"),e.forEach((function(t){l[t]=c[t]})),o?t.scrollHeight>parseInt(c.height)&&(l.overflowY="scroll"):l.overflow="hidden",d.textContent=t.value.substring(0,n),"INPUT"===t.nodeName&&(d.textContent=d.textContent.replace(/\s/g," "));var u=document.createElement("span");u.textContent=t.value.substring(n)||".",d.appendChild(u);var p={top:u.offsetTop+parseInt(c.borderTopWidth),left:u.offsetLeft+parseInt(c.borderLeftWidth)};return i?u.style.backgroundColor="#aaa":document.body.removeChild(d),p}void 0!==t&&void 0!==t.exports?t.exports=n:window.getCaretCoordinates=n}()}])}));
|
||||
83
source/js/third-party/canvas-nest.js
vendored
83
source/js/third-party/canvas-nest.js
vendored
@@ -1,83 +0,0 @@
|
||||
! function () {
|
||||
var cn = document.getElementById('canvas_nest');
|
||||
var mb = cn.getAttribute("mobile");
|
||||
|
||||
if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
|
||||
return;
|
||||
}
|
||||
|
||||
function o(w, v, i) {
|
||||
return w.getAttribute(v) || i
|
||||
}
|
||||
|
||||
function j(i) {
|
||||
return document.getElementsByTagName(i)
|
||||
}
|
||||
|
||||
function l() {
|
||||
var v = cn;
|
||||
return {
|
||||
z: o(v, "zIndex", -1),
|
||||
o: o(v, "opacity", 0.5),
|
||||
c: o(v, "color", "0,0,0"),
|
||||
n: o(v, "count", 99)
|
||||
}
|
||||
}
|
||||
|
||||
function k() {
|
||||
r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
|
||||
}
|
||||
|
||||
function b() {
|
||||
e.clearRect(0, 0, r, n);
|
||||
var w = [f].concat(t);
|
||||
var x, v, A, B, z, y;
|
||||
t.forEach(function (i) {
|
||||
i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1);
|
||||
for (v = 0; v < w.length; v++) {
|
||||
x = w[v];
|
||||
if (i !== x && null !== x.x && null !== x.y) {
|
||||
B = i.x - x.x, z = i.y - x.y, y = B * B + z * z;
|
||||
y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke())
|
||||
}
|
||||
}
|
||||
w.splice(w.indexOf(i), 1)
|
||||
}), m(b)
|
||||
}
|
||||
var u = document.createElement("canvas"),
|
||||
s = l(),
|
||||
e = u.getContext("2d"),
|
||||
r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
|
||||
window.setTimeout(i, 1000 / 45)
|
||||
},
|
||||
a = Math.random,
|
||||
f = {
|
||||
x: null,
|
||||
y: null,
|
||||
max: 20000
|
||||
};
|
||||
u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
|
||||
j("body")[0].appendChild(u);
|
||||
k(), window.onresize = k;
|
||||
window.onmousemove = function (i) {
|
||||
i = i || window.event, f.x = i.clientX, f.y = i.clientY
|
||||
}, window.onmouseout = function () {
|
||||
f.x = null, f.y = null
|
||||
};
|
||||
for (var t = [], p = 0; s.n > p; p++) {
|
||||
var h = a() * r,
|
||||
g = a() * n,
|
||||
q = 2 * a() - 1,
|
||||
d = 2 * a() - 1;
|
||||
t.push({
|
||||
x: h,
|
||||
y: g,
|
||||
xa: q,
|
||||
ya: d,
|
||||
max: 6000
|
||||
})
|
||||
}
|
||||
setTimeout(function () {
|
||||
b()
|
||||
}, 100)
|
||||
}();
|
||||
107
source/js/third-party/canvas-ribbon.js
vendored
107
source/js/third-party/canvas-ribbon.js
vendored
@@ -1,107 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) 2016 hustcc
|
||||
* License: MIT
|
||||
* Version: v1.0.1
|
||||
* GitHub: https://github.com/hustcc/ribbon.js
|
||||
**/
|
||||
|
||||
!(function() {
|
||||
var script = document.getElementById("ribbon");
|
||||
var mb = script.getAttribute("mobile");
|
||||
if (
|
||||
mb == "false" &&
|
||||
/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
var config = {
|
||||
z: attr(script, "zIndex", -1), // z-index
|
||||
a: attr(script, "alpha", 0.6), // alpha
|
||||
s: attr(script, "size", 90), // size
|
||||
c: attr(script, "data-click", true) // click-to-change
|
||||
};
|
||||
|
||||
function attr(node, attr, default_value) {
|
||||
if (default_value === true) {
|
||||
return node.getAttribute(attr) || default_value;
|
||||
}
|
||||
return Number(node.getAttribute(attr)) || default_value;
|
||||
}
|
||||
|
||||
var canvas = document.createElement("canvas"),
|
||||
g2d = canvas.getContext("2d"),
|
||||
pr = window.devicePixelRatio || 1,
|
||||
width = window.innerWidth,
|
||||
height = window.innerHeight,
|
||||
f = config.s,
|
||||
q,
|
||||
t,
|
||||
m = Math,
|
||||
r = 0,
|
||||
pi = m.PI * 2,
|
||||
cos = m.cos,
|
||||
random = m.random;
|
||||
canvas.id = "ribbon-canvas";
|
||||
canvas.width = width * pr;
|
||||
canvas.height = height * pr;
|
||||
g2d.scale(pr, pr);
|
||||
g2d.globalAlpha = config.a;
|
||||
canvas.style.cssText =
|
||||
"opacity: " +
|
||||
config.a +
|
||||
";position:fixed;top:0;left:0;z-index: " +
|
||||
config.z +
|
||||
";width:100%;height:100%;pointer-events:none;";
|
||||
// create canvas
|
||||
document.getElementsByTagName("body")[0].appendChild(canvas);
|
||||
|
||||
function redraw() {
|
||||
g2d.clearRect(0, 0, width, height);
|
||||
q = [
|
||||
{
|
||||
x: 0,
|
||||
y: height * 0.7 + f
|
||||
},
|
||||
{
|
||||
x: 0,
|
||||
y: height * 0.7 - f
|
||||
}
|
||||
];
|
||||
while (q[1].x < width + f) draw(q[0], q[1]);
|
||||
}
|
||||
|
||||
function draw(i, j) {
|
||||
g2d.beginPath();
|
||||
g2d.moveTo(i.x, i.y);
|
||||
g2d.lineTo(j.x, j.y);
|
||||
var k = j.x + (random() * 2 - 0.25) * f,
|
||||
n = line(j.y);
|
||||
g2d.lineTo(k, n);
|
||||
g2d.closePath();
|
||||
r -= pi / -50;
|
||||
g2d.fillStyle =
|
||||
"#" +
|
||||
(
|
||||
((cos(r) * 127 + 128) << 16) |
|
||||
((cos(r + pi / 3) * 127 + 128) << 8) |
|
||||
(cos(r + (pi / 3) * 2) * 127 + 128)
|
||||
).toString(16);
|
||||
g2d.fill();
|
||||
q[0] = q[1];
|
||||
q[1] = {
|
||||
x: k,
|
||||
y: n
|
||||
};
|
||||
}
|
||||
|
||||
function line(p) {
|
||||
t = p + (random() * 2 - 1.1) * f;
|
||||
return t > height || t < 0 ? line(p) : t;
|
||||
}
|
||||
if (config.c !== "false") {
|
||||
document.onclick = redraw;
|
||||
document.ontouchstart = redraw;
|
||||
}
|
||||
redraw();
|
||||
})();
|
||||
73
source/js/third-party/click_heart.js
vendored
73
source/js/third-party/click_heart.js
vendored
@@ -1,73 +0,0 @@
|
||||
!(function(e, t, a) {
|
||||
function r(e) {
|
||||
var a = t.createElement("div");
|
||||
(a.className = "heart"),
|
||||
n.push({
|
||||
el: a,
|
||||
x: e.clientX - 5,
|
||||
y: e.clientY - 5,
|
||||
scale: 1,
|
||||
alpha: 1,
|
||||
color:
|
||||
"rgb(" +
|
||||
~~(255 * Math.random()) +
|
||||
"," +
|
||||
~~(255 * Math.random()) +
|
||||
"," +
|
||||
~~(255 * Math.random()) +
|
||||
")"
|
||||
}),
|
||||
t.body.appendChild(a);
|
||||
}
|
||||
var n = [];
|
||||
(e.requestAnimationFrame =
|
||||
e.requestAnimationFrame ||
|
||||
e.webkitRequestAnimationFrame ||
|
||||
e.mozRequestAnimationFrame ||
|
||||
e.oRequestAnimationFrame ||
|
||||
e.msRequestAnimationFrame ||
|
||||
function(e) {
|
||||
setTimeout(e, 1e3 / 60);
|
||||
}),
|
||||
(function(e) {
|
||||
var a = t.createElement("style");
|
||||
a.type = "text/css";
|
||||
try {
|
||||
a.appendChild(t.createTextNode(e));
|
||||
} catch (t) {
|
||||
a.styleSheet.cssText = e;
|
||||
}
|
||||
t.getElementsByTagName("head")[0].appendChild(a);
|
||||
})(
|
||||
".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"
|
||||
),
|
||||
(function() {
|
||||
var t = "function" == typeof e.onclick && e.onclick;
|
||||
e.onclick = function(e) {
|
||||
t && t(), r(e);
|
||||
};
|
||||
})(),
|
||||
(function e() {
|
||||
for (var a = 0; a < n.length; a++)
|
||||
n[a].alpha <= 0
|
||||
? (t.body.removeChild(n[a].el), n.splice(a, 1))
|
||||
: (n[a].y--,
|
||||
(n[a].scale += 0.004),
|
||||
(n[a].alpha -= 0.013),
|
||||
(n[a].el.style.cssText =
|
||||
"left:" +
|
||||
n[a].x +
|
||||
"px;top:" +
|
||||
n[a].y +
|
||||
"px;opacity:" +
|
||||
n[a].alpha +
|
||||
";transform:scale(" +
|
||||
n[a].scale +
|
||||
"," +
|
||||
n[a].scale +
|
||||
") rotate(45deg);background:" +
|
||||
n[a].color +
|
||||
";z-index:99999"));
|
||||
requestAnimationFrame(e);
|
||||
})();
|
||||
})(window, document);
|
||||
129
source/js/third-party/fireworks.js
vendored
129
source/js/third-party/fireworks.js
vendored
@@ -1,129 +0,0 @@
|
||||
var canvasEl = document.querySelector('.fireworks')
|
||||
if (canvasEl) {
|
||||
var ctx = canvasEl.getContext('2d')
|
||||
var numberOfParticules = 30
|
||||
var pointerX = 0
|
||||
var pointerY = 0
|
||||
// var tap = ('ontouchstart' in window || navigator.msMaxTouchPoints) ? 'touchstart' : 'mousedown'
|
||||
// Fixed the mobile scroll
|
||||
var tap = 'mousedown'
|
||||
var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']
|
||||
|
||||
var setCanvasSize = btf.debounce(function () {
|
||||
canvasEl.width = window.innerWidth
|
||||
canvasEl.height = window.innerHeight
|
||||
canvasEl.style.width = window.innerWidth + 'px'
|
||||
canvasEl.style.height = window.innerHeight + 'px'
|
||||
canvasEl.getContext('2d').scale(1, 1)
|
||||
}, 500)
|
||||
|
||||
var render = anime({
|
||||
duration: Infinity,
|
||||
update: function () {
|
||||
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
|
||||
}
|
||||
})
|
||||
|
||||
document.addEventListener(tap, function (e) {
|
||||
if (e.target.id !== 'sidebar' && e.target.id !== 'toggle-sidebar' && e.target.nodeName !== 'A' && e.target.nodeName !== 'IMG') {
|
||||
render.play()
|
||||
updateCoords(e)
|
||||
animateParticules(pointerX, pointerY)
|
||||
}
|
||||
}, false)
|
||||
|
||||
setCanvasSize()
|
||||
window.addEventListener('resize', setCanvasSize, false)
|
||||
}
|
||||
|
||||
function updateCoords (e) {
|
||||
pointerX = (e.clientX || e.touches[0].clientX) - canvasEl.getBoundingClientRect().left
|
||||
pointerY = e.clientY || e.touches[0].clientY - canvasEl.getBoundingClientRect().top
|
||||
}
|
||||
|
||||
function setParticuleDirection (p) {
|
||||
var angle = anime.random(0, 360) * Math.PI / 180
|
||||
var value = anime.random(50, 180)
|
||||
var radius = [-1, 1][anime.random(0, 1)] * value
|
||||
return {
|
||||
x: p.x + radius * Math.cos(angle),
|
||||
y: p.y + radius * Math.sin(angle)
|
||||
}
|
||||
}
|
||||
|
||||
function createParticule (x, y) {
|
||||
var p = {}
|
||||
p.x = x
|
||||
p.y = y
|
||||
p.color = colors[anime.random(0, colors.length - 1)]
|
||||
p.radius = anime.random(16, 32)
|
||||
p.endPos = setParticuleDirection(p)
|
||||
p.draw = function () {
|
||||
ctx.beginPath()
|
||||
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
|
||||
ctx.fillStyle = p.color
|
||||
ctx.fill()
|
||||
}
|
||||
return p
|
||||
}
|
||||
|
||||
function createCircle (x, y) {
|
||||
var p = {}
|
||||
p.x = x
|
||||
p.y = y
|
||||
p.color = '#F00'
|
||||
p.radius = 0.1
|
||||
p.alpha = 0.5
|
||||
p.lineWidth = 6
|
||||
p.draw = function () {
|
||||
ctx.globalAlpha = p.alpha
|
||||
ctx.beginPath()
|
||||
ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true)
|
||||
ctx.lineWidth = p.lineWidth
|
||||
ctx.strokeStyle = p.color
|
||||
ctx.stroke()
|
||||
ctx.globalAlpha = 1
|
||||
}
|
||||
return p
|
||||
}
|
||||
|
||||
function renderParticule (anim) {
|
||||
for (var i = 0; i < anim.animatables.length; i++) {
|
||||
anim.animatables[i].target.draw()
|
||||
}
|
||||
}
|
||||
|
||||
function animateParticules (x, y) {
|
||||
var circle = createCircle(x, y)
|
||||
var particules = []
|
||||
for (var i = 0; i < numberOfParticules; i++) {
|
||||
particules.push(createParticule(x, y))
|
||||
}
|
||||
anime.timeline().add({
|
||||
targets: particules,
|
||||
x: function (p) {
|
||||
return p.endPos.x
|
||||
},
|
||||
y: function (p) {
|
||||
return p.endPos.y
|
||||
},
|
||||
radius: 0.1,
|
||||
duration: anime.random(1200, 1800),
|
||||
easing: 'easeOutExpo',
|
||||
update: renderParticule
|
||||
})
|
||||
.add({
|
||||
targets: circle,
|
||||
radius: anime.random(80, 160),
|
||||
lineWidth: 0,
|
||||
alpha: {
|
||||
value: 0,
|
||||
easing: 'linear',
|
||||
duration: anime.random(600, 800)
|
||||
},
|
||||
duration: anime.random(1200, 1800),
|
||||
easing: 'easeOutExpo',
|
||||
update: renderParticule,
|
||||
offset: 0
|
||||
})
|
||||
}
|
||||
332
source/js/third-party/piao.js
vendored
332
source/js/third-party/piao.js
vendored
@@ -1,332 +0,0 @@
|
||||
(function (name, factory) {
|
||||
if (typeof window === 'object') {
|
||||
window[name] = factory()
|
||||
}
|
||||
})('Ribbons', function () {
|
||||
var _w = window
|
||||
var _b = document.body
|
||||
var _d = document.documentElement
|
||||
var random = function () {
|
||||
if (arguments.length === 1) {
|
||||
if (Array.isArray(arguments[0])) {
|
||||
var index = Math.round(random(0, arguments[0].length - 1))
|
||||
return arguments[0][index]
|
||||
}
|
||||
return random(0, arguments[0])
|
||||
} else if (arguments.length === 2) {
|
||||
return Math.random() * (arguments[1] - arguments[0]) + arguments[0]
|
||||
}
|
||||
return 0
|
||||
}
|
||||
var screenInfo = function (e) {
|
||||
var width = Math.max(0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0)
|
||||
var height = Math.max(0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0)
|
||||
var scrollx = Math.max(0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0) - (_d.clientLeft || 0)
|
||||
var scrolly = Math.max(0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0) - (_d.clientTop || 0)
|
||||
return {
|
||||
width: width,
|
||||
height: height,
|
||||
ratio: width / height,
|
||||
centerx: width / 2,
|
||||
centery: height / 2,
|
||||
scrollx: scrollx,
|
||||
scrolly: scrolly
|
||||
}
|
||||
}
|
||||
var mouseInfo = function (e) {
|
||||
var screen = screenInfo(e)
|
||||
var mousex = e ? Math.max(0, e.pageX || e.clientX || 0) : 0
|
||||
var mousey = e ? Math.max(0, e.pageY || e.clientY || 0) : 0
|
||||
return {
|
||||
mousex: mousex,
|
||||
mousey: mousey,
|
||||
centerx: mousex - screen.width / 2,
|
||||
centery: mousey - screen.height / 2
|
||||
}
|
||||
}
|
||||
var Point = function (x, y) {
|
||||
this.x = 0
|
||||
this.y = 0
|
||||
this.set(x, y)
|
||||
}
|
||||
Point.prototype = {
|
||||
constructor: Point,
|
||||
set: function (x, y) {
|
||||
this.x = x || 0
|
||||
this.y = y || 0
|
||||
},
|
||||
copy: function (point) {
|
||||
this.x = point.x || 0
|
||||
this.y = point.y || 0
|
||||
return this
|
||||
},
|
||||
multiply: function (x, y) {
|
||||
this.x *= x || 1
|
||||
this.y *= y || 1
|
||||
return this
|
||||
},
|
||||
divide: function (x, y) {
|
||||
this.x /= x || 1
|
||||
this.y /= y || 1
|
||||
return this
|
||||
},
|
||||
add: function (x, y) {
|
||||
this.x += x || 0
|
||||
this.y += y || 0
|
||||
return this
|
||||
},
|
||||
subtract: function (x, y) {
|
||||
this.x -= x || 0
|
||||
this.y -= y || 0
|
||||
return this
|
||||
},
|
||||
clampX: function (min, max) {
|
||||
this.x = Math.max(min, Math.min(this.x, max))
|
||||
return this
|
||||
},
|
||||
clampY: function (min, max) {
|
||||
this.y = Math.max(min, Math.min(this.y, max))
|
||||
return this
|
||||
},
|
||||
flipX: function () {
|
||||
this.x *= -1
|
||||
return this
|
||||
},
|
||||
flipY: function () {
|
||||
this.y *= -1
|
||||
return this
|
||||
}
|
||||
}
|
||||
var Factory = function (options) {
|
||||
this._canvas = null
|
||||
this._context = null
|
||||
this._sto = null
|
||||
this._width = 0
|
||||
this._height = 0
|
||||
this._scroll = 0
|
||||
this._ribbons = []
|
||||
this._options = {
|
||||
colorSaturation: '80%',
|
||||
colorBrightness: '60%',
|
||||
colorAlpha: 0.65,
|
||||
colorCycleSpeed: 6,
|
||||
verticalPosition: 'center',
|
||||
horizontalSpeed: 150,
|
||||
ribbonCount: 5,
|
||||
strokeSize: 5,
|
||||
parallaxAmount: -0.5,
|
||||
animateSections: true
|
||||
}
|
||||
this._onDraw = this._onDraw.bind(this)
|
||||
this._onResize = this._onResize.bind(this)
|
||||
this._onScroll = this._onScroll.bind(this)
|
||||
this.setOptions(options)
|
||||
this.init()
|
||||
}
|
||||
Factory.prototype = {
|
||||
constructor: Factory,
|
||||
setOptions: function (options) {
|
||||
if (typeof options === 'object') {
|
||||
for (var key in options) {
|
||||
if (options.hasOwnProperty(key)) {
|
||||
this._options[key] = options[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
init: function () {
|
||||
try {
|
||||
this._canvas = document.createElement('canvas')
|
||||
this._canvas.style.display = 'block'
|
||||
this._canvas.style.position = 'fixed'
|
||||
this._canvas.style.margin = '0'
|
||||
this._canvas.style.padding = '0'
|
||||
this._canvas.style.border = '0'
|
||||
this._canvas.style.outline = '0'
|
||||
this._canvas.style.left = '0'
|
||||
this._canvas.style.top = '0'
|
||||
this._canvas.style.width = '100%'
|
||||
this._canvas.style.height = '100%'
|
||||
this._canvas.style['z-index'] = '-1'
|
||||
this._onResize()
|
||||
this._context = this._canvas.getContext('2d')
|
||||
this._context.clearRect(0, 0, this._width, this._height)
|
||||
this._context.globalAlpha = this._options.colorAlpha
|
||||
window.addEventListener('resize', this._onResize)
|
||||
window.addEventListener('scroll', this._onScroll)
|
||||
document.body.appendChild(this._canvas)
|
||||
} catch (e) {
|
||||
console.warn('Canvas Context Error: ' + e.toString())
|
||||
return
|
||||
}
|
||||
this._onDraw()
|
||||
},
|
||||
addRibbon: function () {
|
||||
var dir = Math.round(random(1, 9)) > 5 ? 'right' : 'left'
|
||||
var stop = 1000
|
||||
var hide = 200
|
||||
var min = 0 - hide
|
||||
var max = this._width + hide
|
||||
var movex = 0
|
||||
var movey = 0
|
||||
var startx = dir === 'right' ? min : max
|
||||
var starty = Math.round(random(0, this._height))
|
||||
if (/^(top|min)$/i.test(this._options.verticalPosition)) {
|
||||
starty = 0 + hide
|
||||
} else if (/^(middle|center)$/i.test(this._options.verticalPosition)) {
|
||||
starty = this._height / 2
|
||||
} else if (/^(bottom|max)$/i.test(this._options.verticalPosition)) {
|
||||
starty = this._height - hide
|
||||
}
|
||||
var ribbon = []
|
||||
var point1 = new Point(startx, starty)
|
||||
var point2 = new Point(startx, starty)
|
||||
var point3 = null
|
||||
var color = Math.round(random(0, 360))
|
||||
var delay = 0
|
||||
while (true) {
|
||||
if (stop <= 0) break
|
||||
stop--
|
||||
movex = Math.round((Math.random() * 1 - 0.2) * this._options.horizontalSpeed)
|
||||
movey = Math.round((Math.random() * 1 - 0.5) * (this._height * 0.25))
|
||||
point3 = new Point()
|
||||
point3.copy(point2)
|
||||
if (dir === 'right') {
|
||||
point3.add(movex, movey)
|
||||
if (point2.x >= max) break
|
||||
} else if (dir === 'left') {
|
||||
point3.subtract(movex, movey)
|
||||
if (point2.x <= min) break
|
||||
}
|
||||
ribbon.push({
|
||||
point1: new Point(point1.x, point1.y),
|
||||
point2: new Point(point2.x, point2.y),
|
||||
point3: point3,
|
||||
color: color,
|
||||
delay: delay,
|
||||
dir: dir,
|
||||
alpha: 0,
|
||||
phase: 0
|
||||
})
|
||||
point1.copy(point2)
|
||||
point2.copy(point3)
|
||||
delay += 4
|
||||
color += this._options.colorCycleSpeed
|
||||
}
|
||||
this._ribbons.push(ribbon)
|
||||
},
|
||||
_drawRibbonSection: function (section) {
|
||||
if (section) {
|
||||
if (section.phase >= 1 && section.alpha <= 0) {
|
||||
return true
|
||||
}
|
||||
if (section.delay <= 0) {
|
||||
section.phase += 0.02
|
||||
section.alpha = Math.sin(section.phase) * 1
|
||||
section.alpha = section.alpha <= 0 ? 0 : section.alpha
|
||||
section.alpha = section.alpha >= 1 ? 1 : section.alpha
|
||||
if (this._options.animateSections) {
|
||||
var mod = Math.sin(1 + section.phase * Math.PI / 2) * 0.1
|
||||
if (section.dir === 'right') {
|
||||
section.point1.add(mod, 0)
|
||||
section.point2.add(mod, 0)
|
||||
section.point3.add(mod, 0)
|
||||
} else {
|
||||
section.point1.subtract(mod, 0)
|
||||
section.point2.subtract(mod, 0)
|
||||
section.point3.subtract(mod, 0)
|
||||
}
|
||||
section.point1.add(0, mod)
|
||||
section.point2.add(0, mod)
|
||||
section.point3.add(0, mod)
|
||||
}
|
||||
} else {
|
||||
section.delay -= 0.5
|
||||
}
|
||||
var s = this._options.colorSaturation
|
||||
var l = this._options.colorBrightness
|
||||
var c = 'hsla(' + section.color + ', ' + s + ', ' + l + ', ' + section.alpha + ' )'
|
||||
this._context.save()
|
||||
if (this._options.parallaxAmount !== 0) {
|
||||
this._context.translate(0, this._scroll * this._options.parallaxAmount)
|
||||
}
|
||||
this._context.beginPath()
|
||||
this._context.moveTo(section.point1.x, section.point1.y)
|
||||
this._context.lineTo(section.point2.x, section.point2.y)
|
||||
this._context.lineTo(section.point3.x, section.point3.y)
|
||||
this._context.fillStyle = c
|
||||
this._context.fill()
|
||||
if (this._options.strokeSize > 0) {
|
||||
this._context.lineWidth = this._options.strokeSize
|
||||
this._context.strokeStyle = c
|
||||
this._context.lineCap = 'round'
|
||||
this._context.stroke()
|
||||
}
|
||||
this._context.restore()
|
||||
}
|
||||
return false
|
||||
},
|
||||
_onDraw: function () {
|
||||
for (var i = 0, t = this._ribbons.length; i < t; ++i) {
|
||||
if (!this._ribbons[i]) {
|
||||
this._ribbons.splice(i, 1)
|
||||
}
|
||||
}
|
||||
this._context.clearRect(0, 0, this._width, this._height)
|
||||
for (var a = 0; a < this._ribbons.length; ++a) {
|
||||
var ribbon = this._ribbons[a]
|
||||
var numSections = ribbon.length
|
||||
var numDone = 0
|
||||
for (var b = 0; b < numSections; ++b) {
|
||||
if (this._drawRibbonSection(ribbon[b])) {
|
||||
numDone++
|
||||
}
|
||||
}
|
||||
if (numDone >= numSections) {
|
||||
this._ribbons[a] = null
|
||||
}
|
||||
}
|
||||
if (this._ribbons.length < this._options.ribbonCount) {
|
||||
this.addRibbon()
|
||||
}
|
||||
requestAnimationFrame(this._onDraw)
|
||||
},
|
||||
_onResize: function (e) {
|
||||
var screen = screenInfo(e)
|
||||
this._width = screen.width
|
||||
this._height = screen.height
|
||||
if (this._canvas) {
|
||||
this._canvas.width = this._width
|
||||
this._canvas.height = this._height
|
||||
if (this._context) {
|
||||
this._context.globalAlpha = this._options.colorAlpha
|
||||
}
|
||||
}
|
||||
},
|
||||
_onScroll: function (e) {
|
||||
var screen = screenInfo(e)
|
||||
this._scroll = screen.scrolly
|
||||
}
|
||||
}
|
||||
return Factory
|
||||
})
|
||||
|
||||
var cn = document.getElementById('ribbon_piao')
|
||||
var mb = cn.getAttribute('mobile')
|
||||
|
||||
if (mb == 'false' && (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent))) {
|
||||
|
||||
} else {
|
||||
new Ribbons({
|
||||
colorSaturation: '60%',
|
||||
colorBrightness: '50%',
|
||||
colorAlpha: 0.5,
|
||||
colorCycleSpeed: 5,
|
||||
verticalPosition: 'random',
|
||||
horizontalSpeed: 200,
|
||||
ribbonCount: 3,
|
||||
strokeSize: 0,
|
||||
parallaxAmount: -0.2,
|
||||
animateSections: true
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user