zhuyijun/vuepress-theme-reco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change: animation

Browse Source 
of password page
This commit is contained in:
reco_luan 2019-08-12 10:31:23 +08:00
parent 5e56ccc022
commit dd13f17d3c
1 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
components/Background.vue
View File

@ -5,23 +5,20 @@
<script> <script>
export default { export default {
mounted () { mounted () {
const keyPage = this.$themeConfig.keyPage const color = '#fff'
let color = '#424242' const lineColor = '#fff'
let lineColor = '#424242' const num = 20
if (keyPage) {
color = keyPage.color || color
lineColor = keyPage.lineColor || lineColor
}
const script = document.createElement("script"); const script = document.createElement('script')
script.src = "https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"; script.src = 'https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js'
document.body.append(script); document.body.append(script)
script.onload = function () { script.onload = function () {
particlesJS("particles-oli-wrapper", { const particlesJS = window.particlesJS
particlesJS('particles-oli-wrapper', {
particles: { particles: {
number: { number: {
value: 40, value: num,
density: { density: {
enable: true, enable: true,
value_area: 800 value_area: 800
@ -31,27 +28,27 @@ export default {
value: color value: color
}, },
shape: { shape: {
type: "circle", type: 'circle',
stroke: { stroke: {
width: 0, width: 0,
color: "#000000" color: '#000000'
}, },
polygon: { polygon: {
nb_sides: 5 nb_sides: 5
} }
}, },
opacity: { opacity: {
value: 0.3, value: 0.9,
random: false, random: false,
anim: { anim: {
enable: false, enable: false,
speed: 1, speed: 1,
opacity_min: 0.1, opacity_min: 0.6,
sync: false sync: false
} }
}, },
size: { size: {
value: 20, value: 3,
random: true, random: true,
anim: { anim: {
enable: false, enable: false,
@ -64,16 +61,16 @@ export default {
enable: true, enable: true,
distance: 250, distance: 250,
color: lineColor, color: lineColor,
opacity: 0.2, opacity: 0.4,
width: 1 width: 1
}, },
move: { move: {
enable: true, enable: true,
speed: 3, speed: 3,
direction: "none", direction: 'none',
random: true, random: true,
straight: false, straight: false,
out_mode: "out", out_mode: 'out',
bounce: true, bounce: true,
attract: { attract: {
enable: false, enable: false,
@ -83,15 +80,15 @@ export default {
} }
}, },
interactivity: { interactivity: {
detect_on: "canvas", detect_on: 'canvas',
events: { events: {
onhover: { onhover: {
enable: true, enable: true,
mode: "grab" mode: 'grab'
}, },
onclick: { onclick: {
enable: true, enable: true,
mode: "push" mode: 'push'
}, },
resize: true resize: true
}, },
@ -105,13 +102,17 @@ export default {
} }
}, },
retina_detect: true retina_detect: true
}); })
}; }
}
} }
};
</script> </script>
<style lang="stylus" scoped> <style lang='scss' scoped>
#particles-oli-wrapper { #particles-oli-wrapper {
position: absolute;
z-index: -1;
top: 0;
width: 100%;
height: 99vh; height: 99vh;
} }
</style> </style>