jens/9x.github.io
1
0
Fork 0
mirror of https://github.com/9x/9x.github.io.git synced 2026-09-02 09:04:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add interactive particle animation background

Browse Source
This commit is contained in:
openhands
2025-02-16 22:03:33 +00:00
parent ab4d78e857
commit c8dc854fb3
4 changed files with 135 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
css/themes/jmde.css
View File

@@ -18,12 +18,18 @@ main {
/* ---- particles.js container ---- */ /* ---- particles.js container ---- */
#particles-js{ #particles-js{
/* background: #314159; */
position: fixed; position: fixed;
filter: blur(5px);
width: 100%; width: 100%;
height: 100%; height: 100%;
z-index: -10; top: 0;
left: 0;
z-index: 0;
filter: blur(10px);
}
canvas {
display: block;
pointer-events: auto !important;
} }
#bg{ #bg{

8
index.html
View File

@@ -17,9 +17,9 @@
</head> </head>
<body> <body>
<!-- <div id="particles-js" style="position:fixed"></div> -->
<div id="bg"></div> <div id="bg"></div>
<main> <div id="particles-js"></div>
<main style="position: relative; z-index: 1;">
<div class="intro">Dr. Jens Mohrmann</div> <div class="intro">Dr. Jens Mohrmann</div>
<div class="tagline">Physicist | Product Development Engineer</div> <div class="tagline">Physicist | Product Development Engineer</div>
@@ -49,8 +49,8 @@
<span class="sr-only">YouTube</span> <span class="sr-only">YouTube</span>
</a> </a>
</div> </div>
<!-- <script src="js/particles.js"></script> --> <script src="js/particles.min.js"></script>
<!-- <script src="js/app.js"></script> --> <script src="js/particles-config.js"></script>
</main> </main>
</body> </body>
</html> </html>

85
js/particles-config.js Normal file
View File

@@ -0,0 +1,85 @@
particlesJS('particles-js', {
particles: {
number: {
value: 50,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#ffffff'
},
shape: {
type: 'circle'
},
opacity: {
value: 0.6,
random: true,
anim: {
enable: true,
speed: 1,
opacity_min: 0.3,
sync: false
}
},
size: {
value: 5,
random: true,
anim: {
enable: true,
speed: 2,
size_min: 0.5,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: '#ffffff',
opacity: 0.4,
width: 3
},
move: {
enable: true,
speed: 1,
direction: 'none',
random: true,
straight: false,
out_mode: 'out',
bounce: false,
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: 'window',
events: {
onhover: {
enable: true,
mode: 'grab'
},
onclick: {
enable: true,
mode: 'repulse'
},
resize: true
},
modes: {
grab: {
distance: 200,
line_linked: {
opacity: 0.5
}
},
repulse: {
distance: 100,
duration: 0.4
}
}
},
retina_detect: true
});

9
js/particles.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long