Is it possible to have a floating button that flotas like a drone on the page

[multichild]

So I have a blog, and its for hiking and I have started to use drones to create video’s of the routes.

Is it possible to have a button that I will make to look like a drone, and it floats slowly on the screen and it then is clickable to open up the drone footage video.

Sounds a funny one, but I think it would look ace to have it flying for a few seconds from a starting point at the bottom of the page perhaps.

Thanks

[rpg_digital]

Is it possible to have a button that I will make to look like a drone, and it floats slowly on the screen and it then is clickable to open up the drone footage video.

Clickable once the animation finishes?

I haven’t used this but there is an animationend event

Element: animationend event - Web APIs | MDN

The animation of the drone itself is more of a CSS thing. Just a quick google for ‘css animation drone’

SVG Drone Animation With CSS- Easy SVG Drone Animation With CSS

[multichild]

ah cool ye, thats is really good.

The idea was slightly different, in that the drone for example would be sitting at the bottom of the page, floating above the page in a layer. Then it floats up on a set path and the user can click it at anytime and the drone i suppose could return to its start point but it will be hidden anyway by a lightbox layer containing the video.

Thank you though

[PaulOB]

@multichild

in that the drone for example would be sitting at the bottom of the page

You could position:fixed it to the bottom of the page and then animate it over the viewport.

I just borrowed someone else’s pen of a drone from codepen (there are many others) and then animated it over a background.

Just use your own drone image or svg as required or use the one from codepen after checking any license issues (of which there are usually none on codepen - although a thank you to the author may be nice.)

You can then set your js to open up a modal when the drone is clicked.