<p>Небольшой самописный выскакивающий баннер на сайте. Появляется через определенное время в заданном месте. После, для дополнительного привлечения внимания, делает эфект bounce (подпрыгивание).</p>
<p><a href="
http://lexa.pro/demo/notes/2016/bounce-banner.php">Смотреть демо</a></p>
<p>В начале я добавил проверку на наличие куки, если человек уже видел баннер и закрыл его, чтобы не мазолить людям глаза этим баннером). Html довольно прост, как и все остальное: сама картинка и кнопка закрытия.</p>
<pre class="brush:php">
<?php if($_COOKIE['PUZIR'] != "Y"):?>
<div id="bounce">
<div id="bounce_close"></div>
<a href="/">
<img width="180" style="border:0;" src="images/bounce.png" title="" alt="">
</a>
</div>
<?php endif; ?>
</pre>
<pre class="brush:css">
#bounce {
bottom: -500px;
left: 20px;
padding-top: 10px;
position: fixed;
z-index: 9999;
}
#bounce_close {
background: rgba(0, 0, 0, 0) url("images/bounce-close.png") no-repeat scroll center center;
cursor: pointer;
height: 10px;
position: absolute;
top: -10px;
width: 72px;
}
</pre>
<p>В JS я использовал JQuery, поэтому если хотите использовать данную наработку обязательно подключите эту библиотеку.</p>
<pre class="brush:js">
<script>
$(document).ready(function(){
function bounce_ef(){
$("#bounce").animate({bottom:"20px"},2000);
$("#bounce").show("bounce",{},1000);
}
function effect(el) {
setTimeout(function () {
el.animate({bottom: "+=40"}, 200);
el.animate({bottom: "-=40"}, 100);
el.animate({bottom: "+=30"}, 150);
el.animate({bottom: "-=30"}, 80);
el.animate({bottom: "+=20"}, 100);
el.animate({bottom: "-=20"}, 80);
}, 8000);
}
setTimeout(bounce_ef, 1000);
effect($("#bounce"));
//var ml = $("#fb").width() / 2 - 35;
//$("#bounce_close").css({"margin-left": ml + "px"});
$("#bounce_close").click(function() {
$("#bounce").animate({bottom: "-=520"}, 500);
// Отправка аякс запроса на создание кук
$.post("/include/coockie.php");
})
});
</script>
</pre>
<p>И добавляем файлик для запоминания кук на нужное время.</p>
<pre class="brush:php">
<?php
SetCookie("PUZIR", "Y", time()+72000, "/");
?>
</pre>
