Sexy Curl Plus- jQuery Page Flip

Introducing Sexy Curl Plus!

It’s all the goodness of the original, plus a little bit more. Setting it up is exactly the same as the original, just be sure to change the orientation appropriately!

A very popular effect on websites is a book-like page flip that exposes more content beneath to the viewer. The problem with many of these implementations on the web is that they are Flash-based and don’t allow the content to be searchable. If you’re looking around for a JavaScript/jQuery solution then you may have stumbled upon Sexy Curl by Elliot Kember. This is a very good looking page flip animation that can be manually dragged and also automatically on hover.

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow
Devin

Is your WordPress Running Slow?

Milliseconds are money. Website speed is extremely important. We highly recommend WP Engine. Why? Because they make a sluggish WP site fast, support is great and they have excellent uptime.

WP Engine Logo
  • http://mirceasandu.com mircea

    max height doesn’t work anymore, but thanks for this great modification. it’s exactly what i was looking for

    • http://www.wordimpressed.com Devin Walker

      Hey Mircea,

      I have made a few revisions to this plugin since I posted this, I’ve been waiting until the jQuery plugins directory is available to release it but I just updated the scripts on this site. Included in these latest revisions: compatible with the latest jQuery UI release, maxHeight is working once again and the code it cleaned up a bit more. Glad you found what you are looking for here!

      Devin

      • PiersStorey

        Nice jQuery function .. Are you looking to support IE9 in the future?

  • http://mirceasandu.com mircea

    max height doesn’t work anymore, but thanks for this great modification. it’s exactly what i was looking for

  • http://www.dlocc.com DLOCC

    Hey Mircea,

    I have made a few revisions to this plugin since I posted this, I’ve been waiting until the jQuery plugins directory is available to release it but I just updated the scripts on this site. Included in these latest revisions: compatible with the latest jQuery UI release, maxHeight is working once again and the code it cleaned up a bit more. Glad you found what you are looking for here!

    Devin

    • Anonymous

      Nice jQuery function .. Are you looking to support IE9 in the future?

  • Steve

    Hi there, love the plugin and your modification :)

    Quick question – once the page curl has reached it’s max height and changes the z-index of the ‘#target’ div to 9999 – the ‘#target’ div content is not interactive, ie. if i have a testing! in the #target div it’s not clickable.

    Is there a quick fix for this?

    • cheapsally

      Hey Steve, this content should be clickable/interactive. Check out the updated demo I just put online to see how exactly this works. Hope this helps!

      • Steve

        Awesome. It’s working great now. Thank you very much :)

  • Steve

    Hi there, love the plugin and your modification :)

    Quick question – once the page curl has reached it’s max height and changes the z-index of the ‘#target’ div to 9999 – the ‘#target’ div content is not interactive, ie. if i have a testing! in the #target div it’s not clickable.

    Is there a quick fix for this?

    • http://twitter.com/WordImpress Devin Walker

      Hey Steve, this content should be clickable/interactive. Check out the updated demo I just put online to see how exactly this works. Hope this helps!

      • Steve

        Awesome. It’s working great now. Thank you very much :)

  • http://twitter.com/gospacerace James Guy

    Hi,
    Is it possible to apply the curl just to spedcific divs and not the whole page?

    Thanks,

    J

    • cheapsally

      Yes this is definitely possible, you just have to play around with the CSS of the container for it to work properly. Perhaps one of these days I can make another demo that will demonstrate this.

      • http://twitter.com/gospacerace James Guy

        Thanks Devin. I’ll give it a go.

  • http://twitter.com/gospacerace James Guy

    Hi,
    Is it possible to apply the curl just to spedcific divs and not the whole page?

    Thanks,

    J

    • http://twitter.com/WordImpress Devin Walker

      Yes this is definitely possible, you just have to play around with the CSS of the container for it to work properly. Perhaps one of these days I can make another demo that will demonstrate this.

      • http://twitter.com/gospacerace James Guy

        Thanks Devin. I’ll give it a go.

  • Fox

    I’ve found a bug with autoCurl: true

    I’ve got the curl set to bottomRight. Therefore, the page is supposed to curl towards the top left. However, instead it curls toward the bottom left and goes off screen. I’ve tried it in both IE and FF.

    Does anyone have a fix for this? I’m deperate to get this working.

    • http://pulse.yahoo.com/_T2PL6AHT2GVOLZPUPQGKLYQNLY Mark S

      I would like the curl at the bottom right of the page as well. Any ideas anyone?

    • Ben

       Same deal here, the autocurl isn’t a deal breaker for my site, but I’d really like an auto curl feature. 

  • Fox

    I’ve found a bug with autoCurl: true

    I’ve got the curl set to bottomRight. Therefore, the page is supposed to curl towards the top left. However, instead it curls toward the bottom left and goes off screen. I’ve tried it in both IE and FF.

    Does anyone have a fix for this? I’m deperate to get this working.

    • http://pulse.yahoo.com/_T2PL6AHT2GVOLZPUPQGKLYQNLY Mark S

      I would like the curl at the bottom right of the page as well. Any ideas anyone?

    • Ben

       Same deal here, the autocurl isn’t a deal breaker for my site, but I’d really like an auto curl feature. 

  • Nando

    Awesome modification! Thanks!

    Btw, can the plugin be modified to curl the page from left to right?

  • Nando

    Awesome modification! Thanks!

    Btw, can the plugin be modified to curl the page from left to right?

  • Joeanad

    How could I use this to make like an open book page so I can grab the page and turn? I’ve seen this in Flash, but haven’t found a jquery plugin that does that

  • Joeanad

    How could I use this to make like an open book page so I can grab the page and turn? I’ve seen this in Flash, but haven’t found a jquery plugin that does that

  • http://www.lsrdesign.co.uk wigan web designer

    Love it, thanks!!

  • http://www.lsrdesign.co.uk wigan web designer

    Love it, thanks!!

  • web developer

    Sweet plugin! Thanks!

  • web developer

    Sweet plugin! Thanks!

  • http://twitter.com/sidbdane Sid B. Dane

    Hi, love the work, just wanted to report a bug. In Chrome (Windows) elements seem to be selected and turn blue while dragging the curl corner, in the demo page.

    • http://twitter.com/brundlefly Shannon Hubbell

      I’m seeing the same issue.

  • http://twitter.com/sidbdane Sid B. Dane

    Hi, love the work, just wanted to report a bug. In Chrome (Windows) elements seem to be selected and turn blue while dragging the curl corner, in the demo page.

    • http://twitter.com/brundlefly Shannon Hubbell

      I’m seeing the same issue.

  • Dadash2525

    is there anyway to make it from left top side with mouseover effect with clicable links? i need this..

  • Dadash2525

    is there anyway to make it from left top side with mouseover effect with clicable links? i need this..

  • jesper

    is there any way to add touch support to this? i’ve tried adding touch punch but to no avail

    • http://www.wordimpress.com/ Devin Walker

      I haven’t touched this code in awhile but I’m sure there’s a way to add touch support. If you’re interested in contributing let me know!