Hi,
Saw this website and wanted to know how it was done. It seems to be using jQuery, i.e:
Just like how it allows you to go back and forth through the catalogue.
Would appreciate any help.
Thanks.
Tonsils.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Wow, that’s a very cool effect. From an animation standpoint, what
they are doing is using JavaScript to dynamically change the CSS
layout of three DIVs (HTML layers).
Imagine you have three layers. Two are side-by-side, and hold the left
and right pages. The third is hidden entirely, either by setting its
display: to none, or by setting its visibility: to hidden.
When you click on the right page turn widget, the script does the
following:
Run the above, substituting right for left, and you have the other
direction. With a couple of hours/days and Prototype and Scriptaculous
(Element.clonePosition and Effect.Morph), you could cook something up
that you could apply in Freeway.
Walter
On Jan 16, 2009, at 9:32 AM, Tonsils wrote:
Hi,
Saw this website and wanted to know how it was done. It seems to be
using jQuery, i.e:Just like how it allows you to go back and forth through the
catalogue.Would appreciate any help.
Thanks.
Tonsils.
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
There are also loads of PDF > converted to flash page turners out there like…
and an example
http://clients.digipage.co.uk/?id=csm_spring_09
These produce similar effects - some effects better than others.
Here’s a free one http://www.flashpageflip.com/FreeFPF.asp
David
On 16 Jan 2009, at 14:32, Tonsils wrote:
Hi,
Saw this website and wanted to know how it was done. It seems to be using jQuery, i.e:
Just like how it allows you to go back and forth through the catalogue.
Would appreciate any help.
Thanks.
Tonsils.
David Owen
Freeway Friendly Web hosting and Domains ::
Sometime around 16/1/09 (at 15:52 +0000) David Owen said:
There are also loads of PDF > converted to flash page turners out there
Yep, and InDesign CS4 includes this as a built-in feature (as shown
in my Masterclass tutorial in the current issue of MacUser). But
these aren’t at all search engine-friendly.
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Using Protaculous: Page Flip
Images were named left1 - left6 and right1 - right6. This could be a lot simpler if I spent more time on it. Completely accessible (and Google friendly). Try looking at it with JavaScript off.
$R(2,6).each(function(n){
//hide the other images
$('left' + n).hide();
$('right' + n).hide();
});
var rt = $('right1');
var i = rt.innerHTML.toString();
var j = $('left1').innerHTML.toString();
var L = $('left1').getStyle('left');
//make the new hidden image to hold transitions
//and fill it with the starting right image
var sprite = new Element('div',{id:'sprite'}).update(i);
sprite.clonePosition(rt);
$('PageDiv').insert(sprite);
sprite.down('img').setStyle({width:'100%'});
sprite.setStyle({zIndex:500, position:'absolute',display:'none'});
//start the loop
var count = 1;
rt.observe('click',function(evt){
if(count < 6){
count++;
sprite.show();
//cover the right image
//fill the hidden right image with the next right image
rt.update($('right' + count).innerHTML);
//wipe the sprite right
new Effect.Morph('sprite',{
style:'width:1px',
duration:0.5,
afterFinish:function(){
//fill the hidden sprite with the next left image
sprite.down('img').src = $('left' + count).down('img').src;
//expand right and move right at the same time
new Effect.Morph('sprite',{
duration:0.5,
style:{left: L, width:'172px'},
afterFinish: function(){
//change the hidden image beneath
//the sprite to match the sprite
$('left1').down('img').src = sprite.down('img').src;
//move and hide the sprite to
//get ready for the next page
sprite.clonePosition(rt);
sprite.down('img').src = rt.down('img').src;
sprite.setStyle({zIndex:500, position:'absolute',display:'none'});
}
});
}
});
}else{
//reset everything to go again
count = 1;
rt.update(i);
$('left1').update(j);
sprite.down('img').src = rt.down('img').src;
}
});
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Keith,
I’ll have to have a nosey at that, seeing a new MacUser dropped on the office mat this morning.
(The Mag that is, not an exhausted Mac User!)
David
On 16 Jan 2009, at 16:10, Keith Martin wrote:
as shown in my Masterclass tutorial in the current issue of MacUser
David Owen
Freeway Friendly Web hosting and Domains ::
Another solution,
You can use Kvisoft page flipping software: http://www.kvisoft.com/flipbook-maker-pro/
It can help you convert PDF to flash page flip book.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options