Всплывающий баннер через заданное время (JS+HTML+CSS)

Всплывающий баннер через заданное время (JS+HTML+CSS)

<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>

Возврат к списку