The logic of the effect is simple & smart. It is created by animating the size & position of a peel image which is originally positioned over the content to be shown.
BannerSnack, a stunning & easy to use online banner maker application, is giving away 3 Premium Plus Licenses / 1 Year ($149 value/license) to WebResourcesDepot readers.
Details of the giveaway can be found at the bottom of the post.
What is BannerSnack?
BannerSnack is an online banner maker that enables both non-Flash-experienced & experienced Flash users to create quality Flash banners without Flash programming.
It provides all the features you may need:
High-quality text & image effects
Ability to control all aspects of effects & objects (durations, sizes..)
Predefined templates (or you can create from scratch)
After creating a banner, you can embed the link provided by BannerSnack to display it. This way, you can update the banner anytime from the online banner maker application without updating your website’s code again.
Or, you can export the generated banner to a SWF file & upload it to your website (very soon).
An example banner:
To give you an idea, I have created a simple banner with the steps:
Uploading images
Inserting images
Choosing the in-out effects & durations of images
Adding a text & choosing the in-out effects & duration
Publishing it.
A total of 15 minutes (& it was the first time). That’s it.
Google Trends for Websites is a web-based service where you can compare the visitor statistics of websites.
The data displayed is daily unique visitors (after logging in, you can see the numbers that graphs represent) and currently, up to 5 websites can be compared.
Google Ad Planner provides you information about websites by simply entering demographics and sites associated with your target audience. This is a tool to be used when you are planning or searching for websites to advertise.
Ad Planner, currently, can be used by invitation only. You can apply for it here.
Pagepeel, or the "magic corner" type banners were invented by Visualsteel.
They create a new banner area for websites without effecting the current banner areas and easy to implement. On the other hand, pagepeel banners have a relatively high "click per view ratio".
Including Pageearto the websites requires the steps below:
- Download Pageear files.
- Unzip the filed in a folder.
- Create to images with sizes 100×100 and 500×500. 100×100 sized image is the one which will be shown when Pageear is closed and 500×500 will be shown when user mouse overs the Pageear banner. You can pageear_b.jpg ve pageear_s.jpg files as an example. BTW, .GIF and .PNG are not supported.
- Open the Pageear.js file wit a text editor and update the paths to the .JPG and .SWF files depending on your setup.
- Include Pageear.js and AC_OETags.js in to the webpages where Pageear banner will be displayed (example below).
- Place the writeObjects() javascript function under your body tag.
- That’s all.
Pageear can also be implemented easily with the ready to use Wordpress plugin, Joomla module or Typo3 extension (download links below).
Html Code Example
<html>
<head>
<title></title>
<script src= " /path_on_your_server/AC_OETags.js " mce_src= " /path_on_your_server/AC_OETags.js " language= " Javascript " ></script>
<script src= " /path_on_your_server/pageear.js " mce_src= " /path_on_your_server/pageear.js " type= " text/Javascript " ></script>
</head>
<body>
<! – Beginning of contents – >
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
<! – End of contents->