Unobtrusive Fly in Ad

I first wrote a fly in ad script in 2005. JavaScript has changed dramatically since then and so this new unobtrusive scrolling ad script has little in common with that previous one (the code is completely different although the overall result is very similar).

This new scrolling ad script makes use of the $B, $E, and $O objects that provide cross browser code for interacting with the browser, events, and an element in the web page respectively. These three scripts (which have all been included together in dollar.js) are only needed once in your page regardless of how many scripts your page contains that uses them. The actual fly in ad functionality is relatively small and is set up to allow you to specify an id for your fly in ad (so it doesn't use one you already have in your page), the width for your scrolling ad, and the content for your ad as three parameters. The ad will fly in from the top left corner of the browser viewport and while it is progressing slowly toward the centre of the viewport your visitors can interact with it. Moving the mouse over the ad will pause its movement until the mouse moves off again. Clicking on the ad at any time up until it reaches the centre (unless they click on a link within the ad) will cause the ad to move off toward the bottom left of the viewport at three times the speed it entered at.

Download a complete copy of the Fly in Ad script. You can then add the script to your page by placing the following immediately before the </body> tag.

<script type="text/javascript" src="dollar.js"></script>
<script type="text/javascript" src="flyinad.js"></script>

You then simply need to update the values at the bottom of flyinad.js to provide a unique id for the ad, the width of the ad, and the ad content. To create multiple ads for use on different pages simply copy flyinad.js and give it a different filename for each different ad.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow