Scroll-Down FadeIn/SlideIn Div: Eine attraktive Bannerform

Bannerwerbung ist tot…es lebe die Bannerwerbung! Mit einer neuen Form von Bannern, den sogenannten FadeIn- oder SlideIn-Bannern, lassen sich wieder gute Klickraten auf Online-Werbung erreichen.

Es ist allgemein bekannt, dass Banner von vielen Internetsurfern automatisch ausgeblendet werden und somit als Werbeform ihre Wirkung verloren haben. Selbst bewegliche Flashbanner oder animierte Gifs liefern lange nicht mehr die CTR, die man sich als Seitenbetreiber oder Affiliate wünscht.

Ein Trend für originell gesteuerte Werbeplätze, liefern FadeIn- oder SlideIn-Div’s auf Basis von Javascript und JQuery. Beim scrollen einer Seite nach unten, wird automatisch ein Div an einer per CSS angegebenen Stelle eingeblendet. Das Div kann entweder einen Banner, ein Formular oder beliebiges HTML enthalten. Natürlich kann man auch Images etc. direkt einblenden, ohne den Weg über ein Div zu gehen.

Ein Beispiel für ein FadeIn- oder SlideIn-Div findet ihr hier.

Hier die Einzelschritte:

1. Formatieren und ggf. Positionieren des einzublendenden Werbemittels

Code-Snippet im HEAD Bereich der HTML Seite einbinden:

<style type="text/css">
#top-link { display:none; position:fixed; right:5px; bottom:5px; color:green; font-weight:bold; text-decoration:none;}
</style>

2. Einbinden von JQuery (entweder direkt vom eigenen Server oder von jquery.com)

Code-Snippet im HEAD Bereich der HTML Seite einbinden:

<script src="http://code.jquery.com/jquery-latest.js"></script>

3. JavaScript Code einbinden für den FadeIn Effekt

Code-Snippet im HEAD Bereich der HTML Seite einbinden:

<script type="text/javascript">
//plugin
jQuery.fn.topLink = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed: 200
}, settings);
return this.each(function() {
//listen for scroll
var el = $(this);
el.hide(); //in case the user forgot
$(window).scroll(function() {
if($(window).scrollTop() >= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

//usage w/ smoothscroll
$(document).ready(function() {
//set the link
$('#top-link').topLink({
//min: Anzahl Download Pixel einstellen, ab denen das Div eingeblendet wird. fadeSpeed: Geschwindigkeit des FadeIn
min: 200,
fadeSpeed: 500
});
//smoothscroll
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>

Über den folgenden Parameter kann man angeben, ab wieviel Pixeln herunterscrollen das Werbemittel eingeblendet werden soll.

min: 200

Die Geschwindigkeit des FadeIn-Effekts kann man mit folgendem Parameter angeben.

fadeSpeed: 500

4. Angabe des Div’s, welches per FadeIn-Effekt eingeblendet werden soll, wenn der User auf der Seite nach unten scrollt

Angabe am Ende des HTML Dokuments, da das Werbemittel nicht als erstes geladen werden muss. So lädt der Rest der Seite etwas schneller.

<div id="top-link"><img src="images/img_banner.jpg" /></div>

Das war’s schon. Sehr einfach umzusetzen und sicherlich deutlich effektiver als die Standard-Banner, die man sonst so auf Webseiten einbindet.