The peel away effect is a great way to get your visitors attention and direct them to some special content or product. It’s fairly easy to implement. You can also place it just about anywhere, not just in upper corner.
The directions will show implementing the peel away in an Artisteer created theme but you can put it into just about any theme or website design.
Download the zip file containing the peel away script and the starter images.
Step 1 – Edit peel.js
First we need to configure the peel.js file. For WordPress users, I would suggest that you upload the peel folder to you current theme folder (wp-content/themes/your_current_theme/).
Open this file in your text editor and change lines 1,2,3,8,9 to reflect the URL’s of your site. I’ve used my site as an example…
jaaspeel.ad_url = escape('http://budstechshed.com/free-wordpress-install/'); jaaspeel.small_path = 'http://budstechshed.com/wp-content/themes/cardboard_bts/peel/small.swf'; jaaspeel.small_image = escape('http://budstechshed.com/wp-content/themes/cardboard_bts/peel/small-bts.jpg'); jaaspeel.small_width = '100'; jaaspeel.small_height = '100'; jaaspeel.small_params = 'ico=' + jaaspeel.small_image; jaaspeel.big_path = 'http://budstechshed.com/wp-content/themes/cardboard_bts/peel/large.swf'; jaaspeel.big_image = escape('http://budstechshed.com/wp-content/themes/cardboard_bts/peel/large-bts.jpg');
Step 2 – Edit the images
There are two images you need to create called small.jpg and large.jpg. There are some sample images included so that you don’t have to do anything right away.
- small.jpg – The small background image your visitors see before content behind gets revealed. The size is 100 x 100 pixels.
- large.jpg – The image visitors will see when the corner peels away. The size is 500 x 500 pixels.
Step 3 – Upload files
Now all you need to do is upload the entire peel folder to your website. Remember to put it in the location you specified when you edited the peel.js file.
Now open header.php in your text editor and add the following line between the wp_head and the closing head tag…
It should look like this…
Actually, you can place the peel.js script just about anywhere. The placement in the example above will put the peel away in the upper right corner of the browser. On my site I put it in the beginning of the Sheet-body DIV so that it peels away from the header image.
If you have any questions or need some help, just leave a comment and I’ll do what I can to help you out.