Expanding a template with new features. HOW?

[Legaziofunk]

Hi guys,

well, this might be a rather complicated issue - esp. to be answered on a general level, since there's probably no "ONE WAY" to do it.

What do I want?

I found this CSS-animation: https://codepen.io/sean_codes/pen/MXLVGj

Basically, I was first looking for a module which let's me add sections that contain objects such as bubbles/squares/button-like-areas to insert text - and after clicking on which (the objects) then lead to more info e.g. another web-page.

BUT: the above mentioned CSS fulfills this purpose even better, since my texts would not be THAT long.

Furthermore, it looks neat and clean and has practically all I wanted.

NOW: Since I have no real clue how to implement this in my current template (called: fruesteg), or in any template at all, for that matter, I was wondering if anybody could give me hints on how this is supposed to work.

I am already baffled by the idea of integrating html and css code - but I have not had any contact with JavaScript in depth at all when setting up a webpage. I am doing this for myself as a matter of learing by doing and a private challenge. So, I am not a prorgammer or anything...

Thanx in advance - much appreciated!

Cheers
Legaziofunk