website animation

[Biggun]

does anyone know if it is possible to have a small graphic of a plane pulling a banner across the screen.
I would like it to come in from one side of screen and fly out of the other side.

[siran]

Could you explain in a more detail how the graphic should behave.
I created some examples but probably none of these will match your requirement (apart from using a car instead of a plane .
I don't think that can be done using only built-in Xara features.
Maybe Egg will come across and give a hippani example. I guess that would be the best way to achieve what you are after. Unfortunately I have never tried it. ( See https://www.hippani.com/ )
Currently I am experimenting with paper.js (see http://paperjs.org/ ), maybe in some days I can give a little feedback.

[Egg Bramhill]

I agree with Siran.

The only way you could do it directly in Xara as as an animated gif. Not as simple as a Flash file created in Xara but that's now outdated technology (You could export as an avi too but I never have good results with this video type)

I supply two versions using animated gifs plus their creation xar files. Works well but not the simplest of techniques to grasp.

I would prefer to use Hippani to create this type of animation as it's far less complicated (& more Flash like) and file size would be lower & colour depth greater than 256 colours. But I haven't done this here, just used Xara's in-built gif animations.

It conceivably be possible to create a four frame gif and use css / js to move the animated gif across the page, but that's Acorn & Sirans expertise, not mine I'm afraid

[siran]

Here is a paper.js example.

[Acorn]

Here is a play, just using Xara: To Xara and beyond...xar

I tried with a hidden shape grouped further to the left to force the animation to start on the right...

Acorn

[siran]

As it seems to be a better idea to go from right to left I have changed my route. But still don't have a pilot's license.
This one uses a small script at the website head to support the resizing of the paper.js placeholder to full width.

[Egg Bramhill]

I've been trying to get the animated gif to move across the page using the jsfiddle (link in the xar file) but I can't even get the text to move!
Any ideas Acorn, Siran?

[Acorn]

I've been trying to get the animated gif to move across the page using the jsfiddle (link in the xar file) but I can't even get the text to move!
Any ideas Acorn, Siran?

Egg, you have added an ID directly into a DIV tag and the same one appears in the airplane graphic.

Code looking for an ID of animate will stop at the first it finds.
Also, by add animate to the graphic you have just changed a fancy image into a placeholder; you lose the graphic.

The animate code needs to wrap around the Xara code that make up the graphic or you add the gif as a background image to the animate DIV.

For the moment, throw away the plane graphic and the purple Placeholder, keeping its code.

To the green Placeholder, add the purple Placeholder's code to the head and add the special Name UsesJQuery to it.

The CSS was also wrong:

#animate {
position: relative;
border: 1px solid green;
background: yellow;
width: 100px;
height: 100px;
}
border had a semi-colon and not a colon (corrected above).

At present, if you run your code, the plane would fly backwards; you have to animate right with the green Placeholder just touching the right page edge.
I removed the e parameter and the jQuery still works.
I fudged the width line to width = "+=" + $(document).width() * 1.05; as the line stopped short of falling off the left edge.

Acorn

[Egg Bramhill]

Fantastic Acorn. Thanks once more for your assistance.

[Acorn]

Fantastic Acorn. Thanks once more for your assistance.

No problem Egg, try this: animation-blob.xar.

Acorn