Cool animation thing
This commit is contained in:
parent
110ab0b4ca
commit
4cd0680968
6 changed files with 57 additions and 0 deletions
21
site/app.py
21
site/app.py
|
@ -63,6 +63,27 @@ def indexStyle():
|
||||||
response.mimetype = "text/css"
|
response.mimetype = "text/css"
|
||||||
return response
|
return response
|
||||||
|
|
||||||
|
@app.route('/assets/particles.js')
|
||||||
|
def particleJs():
|
||||||
|
js = render_template('assets/scripts/particles.js')
|
||||||
|
response = make_response(js)
|
||||||
|
response.mimetype = "text/javascript"
|
||||||
|
return response
|
||||||
|
|
||||||
|
@app.route('/assets/three.min.js')
|
||||||
|
def threeJs():
|
||||||
|
js = render_template('assets/scripts/three.min.js')
|
||||||
|
response = make_response(js)
|
||||||
|
response.mimetype = "text/javascript"
|
||||||
|
return response
|
||||||
|
|
||||||
|
@app.route('/assets/vanta.net.min.js')
|
||||||
|
def vantaNetJs():
|
||||||
|
js = render_template('assets/scripts/vanta.net.min.js')
|
||||||
|
response = make_response(js)
|
||||||
|
response.mimetype = "text/javascript"
|
||||||
|
return response
|
||||||
|
|
||||||
@app.route('/static/assets/88x31s/<path:filename>')
|
@app.route('/static/assets/88x31s/<path:filename>')
|
||||||
def serve_dir(filename):
|
def serve_dir(filename):
|
||||||
directory = 'templates/assets/88x31s'
|
directory = 'templates/assets/88x31s'
|
||||||
|
|
|
@ -16,4 +16,15 @@ body {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
max-width: 40em;
|
max-width: 40em;
|
||||||
margin: 10%, 10%, 10%, 10%;
|
margin: 10%, 10%, 10%, 10%;
|
||||||
|
margin: auto;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#particle-canvas {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
11
site/templates/assets/scripts/particles.js
Normal file
11
site/templates/assets/scripts/particles.js
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
VANTA.NET({
|
||||||
|
el: "#particle-canvas",
|
||||||
|
mouseControls: true,
|
||||||
|
touchControls: false,
|
||||||
|
gyroControls: false,
|
||||||
|
// minHeight: 200.00,
|
||||||
|
// minWidth: 200.00,
|
||||||
|
scale: 1.00,
|
||||||
|
scaleMobile: 1.00,
|
||||||
|
backgroundColor: 0x0
|
||||||
|
})
|
2
site/templates/assets/scripts/three.min.js
vendored
Normal file
2
site/templates/assets/scripts/three.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
site/templates/assets/scripts/vanta.net.min.js
vendored
Normal file
1
site/templates/assets/scripts/vanta.net.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
@ -6,9 +6,20 @@
|
||||||
</title>
|
</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link href="assets/index.css" rel="stylesheet" type="text/css">
|
<link href="assets/index.css" rel="stylesheet" type="text/css">
|
||||||
|
<script src="assets/three.min.js"></script>
|
||||||
|
<script src="assets/vanta.net.min.js"></script>
|
||||||
|
<script src="assets/particles.js" defer></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div id="particle-canvas"></div>
|
||||||
|
<noscript>
|
||||||
|
<center>
|
||||||
|
<small>
|
||||||
|
this site is designed to work with no javascript. all that javascript adds is an optional animation to the background (it looks cool!).
|
||||||
|
</small>
|
||||||
|
</center>
|
||||||
|
</noscript>
|
||||||
<center>
|
<center>
|
||||||
<p>
|
<p>
|
||||||
hello, visitor number <b>{{ visitor }}</b>! this one is glad to see you.
|
hello, visitor number <b>{{ visitor }}</b>! this one is glad to see you.
|
||||||
|
|
Loading…
Add table
Reference in a new issue