[Pro] Rollovers

I have used rollovers and carousel actions to great effect but are there any actions that can create the kind of effect that is in the example I have posted here. As you rollover the panel the graphic rolls away in the direction of the mouse.

I think the effect is very smart. I had tried working with having different buttons on each side of a graphic to prompt a different reaction but it gets very messy and the idea is to keep things clean and still avoid coding of course.

Any help finding a solution is always appreciated.

Thanks

Russell. Example below

http://www.sismodesign.com/fr/voir/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Wow, that’s a cool effect, and the way it’s being done is quite a mystery to me. I can see that it’s using jQuery (which is minimized into front.min.js), and there are references to Expo.easeOut and Expo.easeInOut, but that’s as far as I get. First I’ve seen this particular effect. What does the site look / act like on an iPad?

There are so many direct references to individual elements in the JavaScript (rather than inferred or calculated references) that I suspect this may have been generated by a software application rather than having been written in a general-purpose “plug-in” manner. Either that or it was hand-written to do this one thing, by someone who knows a hell of a lot more JavaScript than I do.

Walter

On Jun 17, 2014, at 9:17 AM, Russ wrote:

I have used rollovers and carousel actions to great effect but are there any actions that can create the kind of effect that is in the example I have posted here. As you rollover the panel the graphic rolls away in the direction of the mouse.

I think the effect is very smart. I had tried working with having different buttons on each side of a graphic to prompt a different reaction but it gets very messy and the idea is to keep things clean and still avoid coding of course.

Any help finding a solution is always appreciated.

Thanks

Russell. Example below

http://www.sismodesign.com/fr/voir/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

That is really impressive Russell


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter, My initial thought was that there is some very impressive coding there!

Its a great looking effect Sue. I have a design that looks similar but I think I may simply use the carousel on some of the panels and a hide layer/rollover on others so that they fade or move in different ways to add points of interest.

I have just started experimenting with nested carousels. So far the computer has not had a nervous breakdown but it may be close!

Russell


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Russ,
This effect is very popular, possibly overdone, in the WordPress themes world and can be found on many theme galleries. Having said that it is a nice effect and could be achieved using CSS transitions and a bit of JavaScript to detect where the mouse is on the page. The effect isn’t too far from the sliding captions example I put together a while ago;
http://www.freewaystyle.com/sliding-captions/

Here’s a jQuery plug-in that will do most of the heavy lifting for you (there will be others based on other JS libraries);
http://jquer.in/jquery-plugins-for-awesome-image-galleries/direction-slide/
Regards,
Tim.

On 17 Jun 2014, at 14:17, Russ wrote:

I have used rollovers and carousel actions to great effect but are there any actions that can create the kind of effect that is in the example I have posted here. As you rollover the panel the graphic rolls away in the direction of the mouse.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Here’s a jQuery plug-in that will do most of the heavy lifting for you (there will be others based on other JS libraries);
http://jquer.in/jquery-plugins-for-awesome-image-galleries/direction-slide/
Regards,
Tim.

This is what I would call a cool found - thanks for this Tim.

Two (and more) things to keep in mind with all of this:

  1. It’s highly recommended to think first and use then. Thinking means: "Am I able to handle this stuff from the constructional side, is it even possible to recreate it in Freeway? If not - how to do then (MarkUp).

  2. It uses jQuery which is another library then is usually used in Freeway (Scriptaculous/Prototype = Scripty and FX). This simply means some additional work (no conflict) or even alternative jQuery examples (which is my preferred way) for additional effects.

For me personal it is still not to comprehend why the “Script part” in web is split off in this ugly way:

We have a common Mark-Up language, a common Styling language but we haven’t got a common library for dynamic stuff. Scripty experts can’t deal (or don’t want to) with jQ and vice versa. Even writing functions is entirely different.

Even W3C had to accept HTML5 (instead of their stillbirth XHTML2) - where is the genius rear admiral, gosh!

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

A pedant would reply that it’s all JavaScript under the hood – an ECMA-ratified universal standard language. But Prototype (hence the name*) modifies that language to suit its own ends, and any other library or even hand-coded JavaScript can run afoul of these modifications. Prototype adds major functionality to the language in return – it’s not breaking things for fun. But it can only drag the language so far (kicking and screaming): once Prototype is in the environment, you cannot rely on the mistaken assumption that there are actual Array primitives in JavaScript. Under the hood, an Array is a numerically-indexed Object, and so if you use for(i in my_array){ ... } to loop over one, you will get all the extra properties that Prototype has added to the Array object in addition to the values you expect.

As for preference of Prototype over jQuery, I often say that I could build jQuery with Prototype, but not the other way around. Prototype is a foundational toolkit, better-suited for building tools than implementing canned solutions. It appeals to the tinkerer and craftsman in me. It also warps JavaScript to be more like Ruby, and that’s a Very Good Thing, IMO.

Walter

*JavaScript has a unique inheritance model, called Prototypical Inheritance. When you alter the prototype of any object (like Array), all copies of that prototype are also changed, immediately. It’s like quantum entanglement, with all the “spooky” that goes with that idea.

For one example, Prototype extends the Array object to support the idea of enumeration (something that was just added in EcmaScript 6 – remember, Prototype is nearly ten years old, and ran initially on EcmaScript 3 or 2). The ideas pioneered in this library are slowly being added to the base language. Think about that for a moment.

But because JavaScript uses prototypes, Prototype does this extension by altering the prototype of all Array objects everywhere. Whenever you add methods to a base object, those methods are not marked as being private (they can’t be, for security reasons) and so they appear to be additional members of an array if you loop over its members in the naive for foo in bar manner. If you do a “proper” for loop, then you get the correct behavior, and there’s a whole page in the documentation to explain this. But if you use Prototype’s each() method, you get an even more powerful set of behaviors.

On Jun 18, 2014, at 5:17 AM, Thomas Kimmich wrote:

We have a common Mark-Up language, a common Styling language but we haven’t got a common library for dynamic stuff. Scripty experts can’t deal (or don’t want to) with jQ and vice versa. Even writing functions is entirely different.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

… than implementing canned solutions.

Walmart is my only chance preparing my JS-soup. Kicking cans on camping stove - that’s it and it doesn’t make any difference whether using actions or external scripts whatever color.

The point is that people are attracted by the luster of all those examples and I simply wonder how long we keep dealing with “Rollover actions” and “Show/Hide Layer” stuff. Agreed - it perfectly fits into a lots of design examples here (something round about 1998) - but is this really the better attitude?

Neanderthal extinction was caused of missing adaption of changing environmental conditions. In a modern world we could counter this by “progressive enhancement” (the software developer included).

Believe me - I don’t feel better to write this to the best man on board (there are lots of better addressees) - but sometimes it simply sucks.

I’d like to know the “average Freeway-user age” but I guess we all are not getting younger - and the “Youth” on board is represented by a single person.

I never left any doubt that Freeway is cool, actions and their developers are cool as well - and even “more” up to “all” is possible (perhaps), but at a specific point “giving our best” is not enough.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options