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