achieve this effect

Freeway
1

Hi Does anybody know how to achieve the effect when you press on the hand in the right corner.

like the site so ant to try something like this.

Thanks

Cheers

Pete

http://www.gregorymarkhannan.com/web-design/

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

2

Sure. Use the Scriptaculous Morph function to move the image over when you mouse over, and back when you mouse out. Here’s how to implement in Freeway:

First, set your pasteboard (not the page) to be really wide in the Document Setup dialog. This effect relies on the “arm” being way off screen to the right, so you’ll need some room for it. Draw your graphic box and import the arm image, and place it so the hand is on screen and the rest is off. If you center the page, you’ll need to make this image pretty wide to avoid “tipping your hand” (sorry, couldn’t resist).

Next, make note of the ID of your graphic box. This will be reported in the Title field of the Inspector while the box is selected. You will also want to note the number in the left position field of the Inspector. Finally, move the graphic box on screen to where you want it to appear when moused over (use the Shift key to constrain the movement to horizontal only) and write down those positions before using Command - Z to move it back to its starting point.

Apply the Protaculous Action to the page, and choose scriptaculous-packed from the library menu. In the top Function Body button, paste the following code, and modify it to match the numbers and ID you wrote down.

var box = $('theIdOfYourBox');
var startPosition = 700; //the left value 
var endPosition = -40; //where you want it to go
var effectDuration = 0.6; //decimal seconds
box.observe('mouseenter', function(evt){
	this.morph('left:' + endPosition + 'px',
		{duration: effectDuration});
}).observe('mouseleave', function(evt){
	this.morph('left:' + startPosition + 'px',
		{duration: effectDuration});
});

Note that this code is for Freeway 5.6.2 or better, because it uses Prototype 1.7 events (mouseenter and mouseleave). You need to use these otherwise the effect would snap back the moment you hovered over one of the site links on the arm.

Walter

On Sep 6, 2012, at 9:57 AM, Peter wrote:

Hi Does anybody know how to achieve the effect when you press on the hand in the right corner.

like the site so ant to try something like this.

Thanks

Cheers

Pete

http://www.gregorymarkhannan.com/web-design/

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

3

thanks Walter,

will give it a try

Cheers

Pete

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

4

Just a quick note: this doesn’t appear to work on the iPad. The hand comes out ok but won’t go back and there appears no way to get it to do so.

Links all work but the content is hidden under the hand.

Mark

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

5

There isn’t anything equivalent to mouseenter and mouseleave for iOS to use. You could try adding a separate handler for dragging the element out, using dragstart and dragend as the events, noting the x/y of the event and figuring out which way the drag was headed. Or you could just toggle the position on click, which iOS does support.

$('hand').observe('click', function(evt){
	if(evt.element() == this){
		var left = this.getStyle('left').gsub(/[^d]+/,'');
		if(left < 700){ // or whatever your resting right position is
			this.morph('left: 700px');
		}else{
			this.morph('left: -40px');
		}
	}
});

something like that should get you started.

Walter

On Sep 7, 2012, at 2:52 PM, MarkSmith wrote:

Just a quick note: this doesn’t appear to work on the iPad. The hand comes out ok but won’t go back and there appears no way to get it to do so.

Links all work but the content is hidden under the hand.

Mark

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

6

thanks guys,

good to know, will keep at it!

Cheers

Pete

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