add bevy animation but still not in right spot
This commit is contained in:
parent
87ad2ef372
commit
5fbd2d8956
7
website/assets/load_bevy_anim.js
Normal file
7
website/assets/load_bevy_anim.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import init from '/out/bevyanim.js'
|
||||||
|
|
||||||
|
init().catch((error) => {
|
||||||
|
if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
});
|
||||||
1
website/assets/my_new_effect.ron
Normal file
1
website/assets/my_new_effect.ron
Normal file
@ -0,0 +1 @@
|
|||||||
|
(spawn_rate:0.01,spawn_amount:22,emission_shape:Circle(0.0),lifetime:(12.0,0.0),linear_speed:Some((400.0,0.46)),linear_acceleration:Some((0.0,0.0)),direction:Some(((0.0,0.0),1.0)),angular_speed:Some((0.0,0.18)),angular_acceleration:Some((0.0,0.3)),scale:Some((5.0,1.0)),color:None,gravity_direction:None,gravity_speed:None,linear_damp:Some((0.0,0.0)),angular_damp:Some((0.0,0.25)),scale_curve:None,color_curve:Some((points:[((red:0.012286487,green:0.046665076,blue:0.10946172,alpha:1.0),0.1,None),((red:0.9646863,green:0.1651323,blue:0.004391431,alpha:1.0),0.12,None)])))
|
||||||
2326
website/assets/out/bevyanim.js
Normal file
2326
website/assets/out/bevyanim.js
Normal file
File diff suppressed because it is too large
Load Diff
BIN
website/assets/out/bevyanim_bg.wasm
Normal file
BIN
website/assets/out/bevyanim_bg.wasm
Normal file
Binary file not shown.
17
website/assets/out/index.html
Normal file
17
website/assets/out/index.html
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<body style="margin: 0px;">
|
||||||
|
<canvas id="bevy-canvas1" width="100vw" height="100vh"></canvas>
|
||||||
|
<script type="module">
|
||||||
|
import init from './bevyanim.js'
|
||||||
|
|
||||||
|
init().catch((error) => {
|
||||||
|
if (!error.message.startsWith("Using exceptions for control flow, don't mind me. This isn't actually an error!")) {
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
1
website/assets/out/my_new_effect.ron
Normal file
1
website/assets/out/my_new_effect.ron
Normal file
@ -0,0 +1 @@
|
|||||||
|
(spawn_rate:0.01,spawn_amount:22,emission_shape:Circle(0.0),lifetime:(12.0,0.0),linear_speed:Some((400.0,0.46)),linear_acceleration:Some((0.0,0.0)),direction:Some(((0.0,0.0),1.0)),angular_speed:Some((0.0,0.18)),angular_acceleration:Some((0.0,0.3)),scale:Some((5.0,1.0)),color:None,gravity_direction:None,gravity_speed:None,linear_damp:Some((0.0,0.0)),angular_damp:Some((0.0,0.25)),scale_curve:None,color_curve:Some((points:[((red:0.012286487,green:0.046665076,blue:0.10946172,alpha:1.0),0.1,None),((red:0.9646863,green:0.1651323,blue:0.004391431,alpha:1.0),0.12,None)])))
|
||||||
@ -43,6 +43,17 @@ function drawConnections() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function moveBevy() {
|
||||||
|
const canvas_el = document.getElementById("bevy-canvas1");
|
||||||
|
const content_el = document.getElementById("hero");
|
||||||
|
const content_box = content_el.getBoundingClientRect();
|
||||||
|
canvas_el.setAttribute("width", content_box.width);
|
||||||
|
canvas_el.setAttribute("height", content_box.height);
|
||||||
|
canvas_el.setAttribute("top", content_box.top);
|
||||||
|
canvas_el.setAttribute("left", content_box.left);
|
||||||
|
}
|
||||||
|
|
||||||
window.addEventListener("scroll", (event) => {
|
window.addEventListener("scroll", (event) => {
|
||||||
drawConnections();
|
drawConnections();
|
||||||
|
moveBevy();
|
||||||
});
|
});
|
||||||
@ -8,4 +8,11 @@ body{
|
|||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bevy-canvas1{
|
||||||
|
position:fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: -1;
|
||||||
}
|
}
|
||||||
@ -57,8 +57,10 @@ pub fn App() -> impl IntoView {
|
|||||||
#[component]
|
#[component]
|
||||||
fn HomePage() -> impl IntoView {
|
fn HomePage() -> impl IntoView {
|
||||||
view! {
|
view! {
|
||||||
<canvas id="p-e-canvas"></canvas>
|
<script type="module" src="/load_bevy_anim.js">
|
||||||
<div class="md:flex md:flex-row min-h-screen md:justify-center md:items-center">
|
</script>
|
||||||
|
<canvas id="bevy-canvas1" width="100vw"></canvas>
|
||||||
|
<div id="hero" class="md:flex md:flex-row min-h-screen md:justify-center md:items-center">
|
||||||
<img class="max-w-lg rounded hidden md:block" src="/founder_portrait.jpg" />
|
<img class="max-w-lg rounded hidden md:block" src="/founder_portrait.jpg" />
|
||||||
<div class="flex flex-col m-4 p-2 items-start max-w-lg">
|
<div class="flex flex-col m-4 p-2 items-start max-w-lg">
|
||||||
<ul class="flex flex-row justify-around w-full">
|
<ul class="flex flex-row justify-around w-full">
|
||||||
@ -72,6 +74,8 @@ fn HomePage() -> impl IntoView {
|
|||||||
projects outlined on this website. If you want to hire me or ask questions about my projects reach out to me "<a class="underline" href="mailto:liam.fitzpatrick@live.com">here</a>.</P>
|
projects outlined on this website. If you want to hire me or ask questions about my projects reach out to me "<a class="underline" href="mailto:liam.fitzpatrick@live.com">here</a>.</P>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<canvas id="p-e-canvas"></canvas>
|
||||||
|
|
||||||
|
|
||||||
<div id="p-e-content" class="min-h-screen">
|
<div id="p-e-content" class="min-h-screen">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user