Where I have to put prepared HTML, CSS and JS?

1

Hi guys!
I'm not familiar with the coding thats why I'm interested of Hype! But I want to make more complicated things and it seems no other way to do it without any knowledge of coding I guess... For example:
I tried to recreate this feature: https://codepen.io/tutsplus/pen/QEyEQv
OK, but I couldn't. I found the "Edit Head HTML" button in "Document" tab but I can't find where to put CSS code? I learned how to make JavaScript Function and I putted there the code from the example but the final result didn't works.

This is my file: Archive.zip (14.6 KB)
What am I doing wrong?
Thank you for your help

2

this example makes use of the scrollMagic-library mentioned in your link.
scrollMagic_example.hype.zip (12.1 KB)

just scroll up... it's a very basic example.

please look up https://scrollmagic.io/ for further info and API of scrollMagic.

Note: as my example seems to work in a first short test you may run into trouble cause Hypes runtime tries to hold control for its elements positions. scrollMagic may interfer here ...

3

Thank you for the rapid response!
Can I put "center" on the screen instead of "offset: 926"?
Another question is what if I want a different variation and I don't want to hang the image somewhere, but I want to start the sprite's animation when it appears on the screen below and plays while moving up until it hides on top of the screen?

1 Like
4

please have a deeper look in the documentation and examples of https://scrollmagic.io/

2 Likes
5

Thanks a lot!

6

@h_classen is our forum bot. He loves hearts, it will keep him going. We thank you. :heart:

2 Likes
7

ah no ... the currency should be show initiative, not hearts :slight_smile:

1 Like
8

which emoji is that? :muscle: or :wave: or :woman_shrugging:

9

no emoji, just some own brain work and commitment of a questioner :slight_smile:

3 Likes
10

you could use window.innerHeight/2

why not just separate the controlled element from the animation to use the progress there ...