Corner-peel animation without mouseover?

[perdittmann]

Hi everyone,

I am looking for a simple way to inform the reader that the page they see is "swipable".

On the desktop version, there is that nice mouseover effect of a peeling corner. Would it be possible to fire that effect without a mouseover? So that, for instance, iPad users have that visual clue as well? Would it even be possible to have that repeated every ten seconds or something?

Something like $('magazine').peel('br', 10000); ?

Many thanks in advance for your advice! Per

[blasten]

Yes, I think we need that function.

[blasten]

Turn.js 4th includes the new peel method:

To show: $('magazine').turn('peel', 'br'); To hide: $('magazine').turn('peel', false);

Available on www.turnjs.com

[perdittmann]

Hey Emmanuel,

thanks for adding this function to turn.js! I have a further request, maybe this is also possible: At the moment, the corner peels up and stays still afterwards (which I like, it is simple and clear). Could you add an alternative peel version and have the corner peel up and then continue to sway a little, to even get some more attention? That'd be awesome!

Thanks a lot and keep up the excellent work! Per

[blasten]

@perdittmann I will consider that, thanks!

[vishalchanderd]

Well, If I say $('magazine').turn('peel', 'br'); and $('magazine').turn('peel', 'bl'); together, it work well for a while but later all the page get distracted. Can you check this issue please?

[zunil]

Hi everyone, Can i use "$('magazine').turn('peel', 'br');" in every page. Currently it's showing only on front page. thank you

[cyb2cyb]

@perdittmann I think your idea is very good. can i use this animation now？

[philiphphilip]

Hi everyone, Can i use "$('magazine').turn('peel', 'br');" in every page. Currently it's showing only on front page. thank you

        $('#scaleContainer').turn({
            display: 'single',
            elevation: 50,
            width: '100%',
            height: '100%',
            autoCenter: true,
            acceleration: true,
            when: {
                turned: function (event, page) {
                    $('#scaleContainer').turn('peel', 'br');

                    if(prevPage>page){
                        metrics.track('pageturn_left');
                    }else if(prevPage<page){
                        metrics.track('pageturn_right');
                    }
                    prevPage=page;
                }
            }
        });