Key Frame animation code

[SamuelHeatley]

Hi all! I’m trying to insert a key frame animation and am having some trouble doing it.

I want to make an image fly across the home screen and am having some trouble knowing which files to put my HTML and CSS code in.

The code i want to use is:

HMTL

and

CSS

I also believe I need to define the image source somewhere too.

I’m very new to this so sorry for the potentially poor wording in my question

Thanks,
Sam.

[texnixe]

Are you using the Starterkit as a basis or some template?

In any case, there should be a /site/templates/home.php in which you can put your div container (the HTML part).

Then there should be a stylesheet somewhere, in the Starterkit that will be /assets/css/index.css. There you can add your additional styles.

[SamuelHeatley]

Hi texnixe

I’m using the starter kit. This is what I thought I was doing already. I’ll have a play though and get back to you.

Thank you so much.

[SamuelHeatley]

@texnixe I have added the code into the corresponding files and nothing has happened except for this

I am concerned about is how the code knows where the image source is meant to be pulled from. I feel like I haven’t written it properly.

[SamuelHeatley]

this is how my home.php looks

[thguenther]

{image 1} is definitely not the way to reference an image. Where does the image come from? Do you have some image/files field in the panel? Maybe try adding something like this:

<div class="flier"><?= $page->images()->first() ?></div>

[SamuelHeatley]

@thguenther this worked! I also realised I was putting the code into the snippet file accidentally.

I didn’t have a file section in my blueprint file so I did that and then pit in the code you suggested and it worked. May I ask how the code you sent calls the image/flier?

Thanks so much for all your help and I understand if you don’t have more time to put towards this.

Sam.