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

Merge pull request #1 from 9x/add-particle-animation

Browse Source 
Add interactive particle animation background
This commit is contained in:
Jens Mohrmann
2025-02-16 23:05:11 +01:00
committed by GitHub
parent ab4d78e857 c8dc854fb3
commit b63ed4fdbb
4 changed files with 135 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
css/themes/jmde.css
View File

@@ -1,35 +1,41 @@
/* Theme */ /* Theme */
main { main {
/* background: #314159; */ /* background: #314159; */
color: #7ba2bf; color: #7ba2bf;
} }
.icons-social a { .icons-social a {
color: #7ba2bf; color: #7ba2bf;
; ;
} }
.icons-social a svg path{ .icons-social a svg path{
fill: #7ba2bf; fill: #7ba2bf;
; ;
} }
/* ---- particles.js container ---- */ /* ---- particles.js container ---- */
#particles-js{ #particles-js{
/* background: #314159; */ position: fixed;
position:fixed; width: 100%;
filter: blur(5px); height: 100%;
width: 100%; top: 0;
height: 100%; left: 0;
z-index: -10; z-index: 0;
filter: blur(10px);
} }
#bg{ canvas {
background: #314159; display: block;
position:fixed; pointer-events: auto !important;
width: 100%; }
height: 100%;
z-index: -100; #bg{
background: #314159;
position:fixed;
width: 100%;
height: 100%;
z-index: -100;
} }

36
index.html
View File

@@ -1,29 +1,29 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dr. Jens Mohrmann</title> <title>Dr. Jens Mohrmann</title>
<link rel="icon" href="favicon.ico" type="image/png" /> <link rel="icon" href="favicon.ico" type="image/png" />
<link href="https://fonts.googleapis.com/css?family=Reem+Kufi|Roboto:300" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Reem+Kufi|Roboto:300" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/styles.css"> <link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/themes/jmde.css"> <link rel="stylesheet" href="css/themes/jmde.css">
</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>
<div class="icons-social"> <div class="icons-social">
<a href="mailto:(Dr. Jens Mohrmann)mailjensmohrmannde?subject=Please add @ and . in adress"> <a href="mailto:(Dr. Jens Mohrmann)mailjensmohrmannde?subject=Please add @ and . in adress">
<b style="padding: 10px; font-size: 3em; font-weight:bolder;font-family: 'Funnel Sans', sans-serif;" aria-hidden="true" title="Email">@</b> <b style="padding: 10px; font-size: 3em; font-weight:bolder;font-family: 'Funnel Sans', sans-serif;" aria-hidden="true" title="Email">@</b>
<span class="sr-only">Email</span> <span class="sr-only">Email</span>
@@ -32,7 +32,7 @@
<i class="fab fa-linkedin" aria-hidden="true" title="LinkedIn"></i> <i class="fab fa-linkedin" aria-hidden="true" title="LinkedIn"></i>
<span class="sr-only">LinkedIn</span> <span class="sr-only">LinkedIn</span>
</a> </a>
<a target="_blank" href="https://github.com/9x"> <a target="_blank" href="https://github.com/9x">
<i class="fab fa-github" aria-hidden="true" title="Github"></i> <i class="fab fa-github" aria-hidden="true" title="Github"></i>
<span class="sr-only">Github</span> <span class="sr-only">Github</span>
</a> </a>
@@ -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