mirror of
https://github.com/9x/9x.github.io.git
synced 2026-09-02 09:04:33 +02:00
Add interactive particle animation background
This commit is contained in:
openhands
@@ -1,35 +1,41 @@
|
||||
/* Theme */
|
||||
|
||||
main {
|
||||
/* background: #314159; */
|
||||
color: #7ba2bf;
|
||||
/* background: #314159; */
|
||||
color: #7ba2bf;
|
||||
}
|
||||
|
||||
.icons-social a {
|
||||
color: #7ba2bf;
|
||||
;
|
||||
color: #7ba2bf;
|
||||
;
|
||||
}
|
||||
|
||||
.icons-social a svg path{
|
||||
fill: #7ba2bf;
|
||||
;
|
||||
fill: #7ba2bf;
|
||||
;
|
||||
}
|
||||
|
||||
/* ---- particles.js container ---- */
|
||||
|
||||
#particles-js{
|
||||
/* background: #314159; */
|
||||
position:fixed;
|
||||
filter: blur(5px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -10;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
filter: blur(10px);
|
||||
}
|
||||
|
||||
#bg{
|
||||
background: #314159;
|
||||
position:fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -100;
|
||||
canvas {
|
||||
display: block;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
#bg{
|
||||
background: #314159;
|
||||
position:fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -100;
|
||||
}
|
||||
36
index.html
36
index.html
@@ -1,29 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<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://use.fontawesome.com/releases/v5.13.1/css/all.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<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 rel="stylesheet" href="css/reset.css">
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<link rel="stylesheet" href="css/themes/jmde.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- <div id="particles-js" style="position:fixed"></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="tagline">Physicist | Product Development Engineer</div>
|
||||
<div class="icons-social">
|
||||
<div class="intro">Dr. Jens Mohrmann</div>
|
||||
<div class="tagline">Physicist | Product Development Engineer</div>
|
||||
<div class="icons-social">
|
||||
<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>
|
||||
<span class="sr-only">Email</span>
|
||||
@@ -32,7 +32,7 @@
|
||||
<i class="fab fa-linkedin" aria-hidden="true" title="LinkedIn"></i>
|
||||
<span class="sr-only">LinkedIn</span>
|
||||
</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>
|
||||
<span class="sr-only">Github</span>
|
||||
</a>
|
||||
@@ -49,8 +49,8 @@
|
||||
<span class="sr-only">YouTube</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- <script src="js/particles.js"></script> -->
|
||||
<!-- <script src="js/app.js"></script> -->
|
||||
</main>
|
||||
<script src="js/particles.min.js"></script>
|
||||
<script src="js/particles-config.js"></script>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
85
js/particles-config.js
Normal file
85
js/particles-config.js
Normal 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
9
js/particles.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user