Sridhar Katakam

Genesis and WordPress Tutorials

Curtains opening and closing animation effect on top of Soliloquy slider in Altitude Pro

by 3 Comments

In my Facebook group a user asked:

Is it possible to show curtain animation effect such as this http://buildinternet.com/2009/07/animate-curtains-opening-with-jquery/ on top of soliloquy slider in altitude pro theme?

I’ve seen your overlay tutorial on Soliloquy slider. Curtain effect will be great to see.

In this tutorial I share the steps for replacing the Front Page 1 image section with a Soliloquy slider (commercial plugin) in Altitude Pro and covering it up with a curtain, which when pulled reveals the slider.

Screenshots:

Initial state (curtain closed):

altitude-pro–curtain-closed

When the curtain is pulled:

altitude-pro–curtain-open-showing-soliloquy

Screencast:

Step 1

Download this zip file (mirror), extract the contents and upload the following images to Altitude Pro's images directory:

darkcurtain.jpg
frontcurtain.jpg
rope.png

Step 2

In front-page.php replace

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • getting error. we need to remove easeOutBounce from the home.js and from the following lines
    $(this).stop().animate({top: ‘-40px’ }, {queue:false, duration:350, easing:’easeOutBounce’});
    $(this).stop().animate({top: ‘-40px’ }, {queue:false, duration:350, easing:’easeOutBounce’});

    Reply

  • Hi Thanks for this tutorial. I also got an error “Uncaught TypeError: m.easing[this.easing] is not a function” (and the curtains did not open). I googled everywhere and it seemed to relate to the jquery ui not being included. I don’t know enough about it to verify. But commenting out just the easing:’eastOutBounce’ made it work. So thanks Aniketbhave. I would like to know how to have it use the bounce for future reference though. Cheers,

    Reply
    • >