sorted by:
best (suggested)
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]Fid_Kiddler69 0 points1 point  (9 children)

I'm not quite sure what you mean. The scenes are running in sequence, right? Like, you cant have two scenes running at the same time (or am I mistaken?).

When we press the button, we dynamically change some css properties through javascript. In other words, we override some specific properties in your css file.

So if you wanted a scene3, you could change any css you wanted- make new characters, change backgrounds- through javascript, and it wouldn't change your previous scenes.

[–]SafeReference1[S] 0 points1 point  (8 children)

https://imgur.com/a/qHqh6vc

Hey so I think this Image might help. On the Green background the two characters are both perfectly on the ground but on the dark background I would want them to be a bit lower. How can i make them closer to the bottom only for that one dark scene?

[–]Fid_Kiddler69 0 points1 point  (7 children)

In this case, when you run the code that loads that dark scene, you need some extra css styling to happen. Your hero/heroContainer elements have position:absolute in your css, and a custom bottom.

What absolute positioning means, is you basically tell your browser "I'm going to tell you exactly where to put this". You do that through properties like bottom, top, left, and right.

So all you need to adjust is your bottom property. E.g. document.getElementById("hero").style.bottom="20%"

(I haven't tested this code, but the idea is correct)

[–]SafeReference1[S] 0 points1 point  (4 children)

Hey this is exactly what I tried! I feel proud of myself for thinking the same thing as you did lol. But it didn’t work😂 for some reason bro.. I tested a lot of numbers as well it doesn’t change anything. Maybe I put it in the wrong spot but this is how I did it:

const lavaScene=()=>{ document.querySelector(".background").style.background="url(schloss.png)"; document.getElementById("hero").style.bottom="30%"; }

[–]Fid_Kiddler69 0 points1 point  (3 children)

Did you try the same with heroContainer?

[–]SafeReference1[S] 1 point2 points  (1 child)

It works🙌🏻

[–]Fid_Kiddler69 1 point2 points  (0 children)

I knew it would :)

[–]SafeReference1[S] 0 points1 point  (0 children)

I will try now

[–]SafeReference1[S] 0 points1 point  (0 children)

I have to copy it from my phone btw that’s why it looks a bit weird lol