Can you make a little screen-cast of what Win8 looks like when you click on a tile? I have no idea, no access to any computer so encumbered. Scriptaculous is endlessly configurable, there is just about no limit to what you can do with it if you know what you’re looking for.
Walter
On Jun 20, 2014, at 4:25 PM, tobiaseichner wrote:
Hello,
I’m looking for an easy way to applying some kind of Win8-like tile animation to a DIV box when being clicked.
The DIV box uses the “onclick” event handler with window.location.href… for mouse clicks.
I played around using script.aculo.us effects, but my results are far away from having similarity with Win8.
Perhaps someone faced a similar challenge in the past and can help. I appreciate any hint.
Hi Tobias,
Do you want to do a Metro-like tile effect where the tile content either slides or transforms in some way? I made this example a while ago now which uses CSS transforms to manipulate the divs in 3D; http://www.freewayactions.com/test/card-flip/
It works pretty well in Webkit browsers (Safari, Chrome, Andriod etc) but needs shoring up in other browsers with some sort of fallback. You could do this quite easily either using just CSS or in combination with JavaScript to manipulate the tiles in other ways.
Regards,
Tim.
On 20 Jun 2014, at 21:25, tobiaseichner wrote:
I’m looking for an easy way to applying some kind of Win8-like tile animation to a DIV box when being clicked.
@Walter: Unfortunately I can’t get an animation of the Win8 tile, but I have something better: A ready-to-use solution based upon jQuery (and much too complex for my application).
@DeltaDave: That’s quite nice, too. But unfortunately not the effect I’m looking for.
See the link above to the jQuery project, there is a demo. They really managed it that mouse clicks are triggering an animation depending upon the mouse position on the tile.
There are a LOT of demos on this page. Is there a particular one that you want to duplicate?
I don’t see anything impossible with Scriptaculous here. I do see plenty that you would need to do outside of the usual “I can’t code, give me an Action for that” paradigm, however.
The FX Actions can do many of the basic Scriptaculous moves, but they are doubly handicapped: they don’t provide any entry point for customizing the effect (outside of the parameters in the Actions palette (delay and speed, usually), and they don’t allow you to chain effects the way that Scriptaculous is actually written to work, because they apply the script in an inline “DOM Level Zero” style with onclick and onmouseover handlers.
The modern way to attach scripts is to write an unobtrusive listener function in the head or bottom of the page body, and attach event handlers to individual objects. You can stack the handlers that way, because there’s no limit to the number of handlers a single event can trigger. In contrast, an onclick handler in the element itself can only accept a single instruction. If you add another one, it wipes out the first.
Walter
On Jun 22, 2014, at 10:00 AM, tobiaseichner wrote:
See the link above to the jQuery project, there is a demo. They really managed it that mouse clicks are triggering an animation depending upon the mouse position on the tile.
I referred to the three tiles on the right side when opening the URL (directly on the front page).
While I was able to build some kind of push button effect, I hang on doing the animation working relative to the mouse pointer location on the tile (e.g. when clicking the tile with the pointer on the left side, the tile moves to the left and so on).
Anyway, it’s not a must-have feature, just a nice-to-have one for the project I’m currently working on. I’ll keep on this, perhaps diving into the jQuery project and taking some parts from there.
I’m afraid that these jump so quickly down the page that I can’t really see the effect happening. When I squint, I can see for a fraction of a second that one side “dips” when you click on that side, and vice-versa. Is that what you’re after? If so, I would just put a clear GIF layer over the top of each side, and attach a different effect to each clear button. There is a way to get the click-x and click-y out of a click event, and programmatically do the same thing based on the geometry of the object clicked on, but it’s a fair bit more work.
Walter
On Jun 22, 2014, at 10:48 AM, tobiaseichner wrote:
I referred to the three tiles on the right side when opening the URL (directly on the front page).
While I was able to build some kind of push button effect, I hang on doing the animation working relative to the mouse pointer location on the tile (e.g. when clicking the tile with the pointer on the left side, the tile moves to the left and so on).
Anyway, it’s not a must-have feature, just a nice-to-have one for the project I’m currently working on. I’ll keep on this, perhaps diving into the jQuery project and taking some parts from there.
I just tested it using Safari right now, but if that professional solution does not consistently work on major browser, I fear that I’ll give up before spending (wasting) too much time.
I must admit that I am not using the latest Safari on this machine so my comment may be unrepresentative - but you should always test in as many browsers as possible.
Here is another offering that uses just CSS but it employs the perspective declaration which is not unilaterally supported.
@DeltaDave: Thank you very much for sharing it. It looks quite good.
Yes, implementing such gadgets can be tricky considering browser compatibility.
I found out today that the above mentioned jQuery solution is not working well on some (older, but not outdated) releases of Firefox. So while looking great, it’s something for the “latest generation” only.
while looking great, it’s something for the “latest generation” only.
I am afraid that this will always be the case - it all depends whether these things are important enough to you or whether they should just be treated as frivolous window dressing.
To me the case will always be - is it really worth the trouble? Is it going to generate more sales?
Exactly. The thing here is to apply your effects in a manner which fails gracefully. So I would use the CSS technique, and think of it as the extra garnish on the plate, not the main meal. Your up-to-date users will appreciate the extra layer of detail, while your less-enabled visitors will never know what they are missing.
Walter
On Jun 23, 2014, at 9:05 PM, DeltaDave wrote:
while looking great, it’s something for the “latest generation” only.
I am afraid that this will always be the case - it all depends whether these things are important enough to you or whether they should just be treated as frivolous window dressing.
To me the case will always be - is it really worth the trouble? Is it going to generate more sales?
Yes, I also think so. The site’s usability should not suffer, “content is king”, as the SEO people are always telling.
Anyway, some visitors are considering a website as boring if there is not at least one (annoying) animation per page. But this is depending upon the site’s target audience, of course.
For the current site I’m working on, I’ll implement it, since it is a private one and therefore a good place to experiment with such things.
