jQuery: ruchomy skyscraper

Dzisiaj zaprezentuje w jaki sposób możesz na swojej stronie umieścić baner zwany także skyscraperem. Jest to baner o wymiarach 120×600 pikseli, który zazwyczaj wyświetlany jest po boku strony. Jest to jeden z tych rodzajów banerów, których efektywność jest największa (liczba kliknięć w baner), dlatego warto się zastanowić nad umieszczeniem go na swojej stronie. Nasz skrypt sprawi, że baner będzie się przemieszczał wraz z przewijaniem strony, dzięki czemu użytkownik będzie go cały czas widział. Ważnym plusem tego tutoriala jest fakt, że pojawienie się banera nie zmienia centrowania strony.

W naszym skrypcie w sekcji <head>…</head> dodajemy bibliotekę jQuery:

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Teraz musimy zadeklarować odpowiedni styl w tej samej sekcji:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!--
#container {
width:775px;
height:auto;
margin:0px auto;
}
#skyscraper {
width:120px;
height:600px;
float:left;
border:0px solid;
}
-->

Teraz przechodzimy do sekcji <body>…</body>. Tworzymy kontener strony o szerokości 775px, a w nim umieszczamy nasz baner w klasie skyscraper:

1
2
3
4
<div id="container" style="position:relative">
<div id="skyscraper" style="position:absolute;top:0px;right:-142px;border:0px solid #827e80;border-left:0px;border-top:0px">
<!-- Tutaj wklejamy kod do bannera -->
</div>

Musimy jeszcze po tym divie dodać odpowiednią funkcję w Javascript, która będzie korzystać z biblioteki jQuery. Funkcja ta odpowiedzialna jest za „podążanie banera za użytkownikiem”, czyli jak użytkownik przewinie stronę w dół, to wraz za nim podąży baner.

1
2
3
4
5
6
<script type="text/javascript">
$(window).scroll(function()
    {
    $('#skyscraper').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});
 </script>

Funkcja uaktywnia się w momencie, gdy użytkownik przewija okno w dół lub w górę. Wtedy div o id równym skyscraper zostaje animowany tak, że ustawiamy atrybut top, który jest równy przesunięciu strony licząc od jej góry.

Działający skrypt możecie znaleźć tutaj.

Leave a Comment

nineteen − 13 =