How to make this Flipping card happen in the xara web designer?

Hi,

Does someone know how to make this Flipping card animation happen in XARA web designer?

https://davidwalsh.name/demo/css-flip.php

Styled Card (Horizontal Flip)

Alexia

I think that Acorn will have an idea.

Quote:

---

Originally Posted by gwpriester

I think that Acorn will have an idea.

---

It is fairly complicated. The front and back objects would be Named. Then there would be a Placeholder with the HTML code in its body. Then JavaScript or jQuery to place the Named objects in-line to the HTML code. Finally, the CSS would be put in the Placeholder in its head; the vendor prefixes.

My idea is not to bother. Experiment with the Hover 1 Link Photo Hover in the On-line Content Catalogue.

Acorn

Hi Acorn,

Would you give me an example because I need to do a page including twenty members,
and I can following your structure. Thanks!

Alexia

Acorn - I don't think the Hover 1 Link is the answer. Is there some way given the information from the site linked to that you can build a module that will work?

You can use Web Animation and have one shape flip to a second object but the second object does not flip back.

I think Acorn is just saying it CAN be done but is it really worth that effort when a very similar effect can be done very easily using the Hover widgets?

Quote:

---

Originally Posted by Egg Bramhill

I think Acorn is just saying it CAN be done but is it really worth that effort when a very similar effect can be done very easily using the Hover widgets?

---

+1 Egg. It is mainly the vendor code detail that is awkward. There are site that claim to help but browsers change so the CSS could break and then you have a duff widget. If I did the initial legwork, I would be welded to its capability therafter (but only when it goes wrong).

Acorn

Hi Acorn,

It seems complicate to do it, right?

Alexia

Check out this website, the riders' list is cool.

http://www.dakar.com/dakar/2017/us/r...ers-bikes.html

I hope that my members website have this kind of effect.

Alexia

Alexia,

I really do not understand why you want the picture to flip. Are you trying to show some other information on the back side or are you just wanting the look of flipping.

As far as the last link that you posted, the effect as used on this page does nothing for me personally. The reason is because you go from a larger picture and then the picture flips and now shows a thumb nail shot of the same picture. To me, this does not accomplish anything. I am all for graphic effects and actions on the page but it should lead to some overall reason. If the reason is just because you think it is cool, that is fine but from a visitors perspective it may not make much of a difference. Then you have to ask yourself, is this something you want to invest the time into to accomplish.

Ray

I tried to create a widget from it.
Drag the file widget_dwFlip_v1.xar to your design, resize the widget to your needs and edit it to change the content. You can also give it a link the usual way.
When editing you will find two groups which represent the front and back of the widget.
See example file.
Don't blame me if it doesn't work as expected. I just copied the css from the given link and removed some stuff.
To change the speed of the flipping you will have to edit the css file in the widget file and re-import it...

Siran,

Thanks your effort for this widget, this helps me a lot to do the whole project, original maybe have to waste 2 or 3 screen to browser it, but this way I can use one screen to display the group . Thank you so much.

Best,

Alexia

Happy you think it is useful.
Here is a new version that allows to set the flipping speed and to use vertical flipping.

That's cool Siran. I must admit I got lost due to the zoom factor of dwFlip_2. I failed to see the options for vert/horiz flips or timing due to the zoom factor. Just stating that it's a hard learning curve for newbies (& me) to follow.

Sorry for that Egg. I'm not very good at widgets. Will try to remember for the next time.

Please don't apologise siran. I merely wanted to point out what I was seeing.

Re-arranged things a bit to avoid the problem you described.

Quote:

---

Sorry for that Egg. I'm not very good at widgets.

---

Siran - You are entirely too modest.

Hi Siran,

Thank you very much, you are a perfectionist! =D>
Best,

Alexia

I don't think so Gary. I just took one of the photo hover widgets and made some changes to it. By chance it somehow worked. I really don't know what is going on there. For example I would have changed the widget picture that appears initially when dragged to the page, if I only knew how...

Siran,

I have a big problem, I need to use your effort widget on Wed Designer 10, what should I do right now?
Best,

Alexia

I still have V10 installed on my home computer and will have a look at it this weekend.

Siran,

Many Many Thanks!

Best,

Aleixa

This should work in V10 and later. Please report if it doesn't.

Siran,

I appreciate your helps. I will try and let you know the result.
Best,

Alexia

not quite sure I 100% understand all that is going on here... so, I dug through the widget looking for the CSS and did not find it.

The reason I was looking is because this looked very interesting - so, I downloaded the widget to try it out and saw that the image "flips" but it does not do the perspective change. If you go back to the original website sample given and watch the image actually maintains perspective as it flips making it look like the edge coming toward you is larger than the edge moving away from you...

Anyway - I copied the CSS from the website and pasted it into my Xara head code area with some <style> tags around it and now the perspective does work for me...

I might have messed it. To allow to change the speed I made some changes. And also the flipping back did not look right in Firefox so I made some more changes, maybe these cause the problems.

Siran,

Couldn't work here. no flipping as before??

Best,

Alexia

That's strange Alexia. Are you on a different computer where you have IE9 installed? This widget (and the demo on the linked page) will not work in IE9 or older.
Works fine for me except for the effect wfcentral described (but that is also true for the demo page) and that Opera flips instantly sometimes (which the demo page also does, but not so often).

Siran,

I tested on the IE11, Chrome and firefox, the screen was white, nothing happened.

Alexia

I can't reproduce your problem. Did you drag the widget to your document or did you open it directly?

I'm just going to add two more comments that I believe echo what Acorn and Egg are saying (which I believe to be true)

1. bells and whistles like this look cool at first, but having to support all the issues of different browsers and people complaining it didn't work for them quickly gets old

2. I really hate it when I go to a website site and have to mouse-over every image to understand what is going on... some examples... if I'm looking to buy a computer and I go their website and it shows me 20 "cards" that I have to mouseover every card to see the computer specs/price/etc... I'm leaving that site real quick...

Siran,

You said the key point, I used open file, and now I drag the file into the page, it is running nicely:)

Thank you very much.

Best,

Alexia