Новогодний стикер с Сантой



Продолжаем украшать сайт, добавляя тематические вставки.
В этот раз через раздел управление рекламой добавим на сайт виджет/стикер с Сантой.

Порядок создания банера аналогичный описанному в статье Снег на сайт для DLE



Готовый код для банера

<div id="ny_dedmoroz" class="visible-lg">
     <img src="https://tcse-cms.com/uploads/dedmoroz.png" class="img-responsive">
</div>

<style type="text/css">
    #ny_dedmoroz {
        position: fixed;
        top: 30%;
        left: 1px;
        display: block;
        width: 200px;
        z-index: 5000;
    }
</style>


Сам тег банера {banner_newyear_santa} тоже вставляем в шаблон main.tpl перед
</body>



Несколько пояснения по коду:
class="visible-lg"

Указывает фреймворку bootstrap 3 что блок со стикером будет отображаться только если ширина экрана браузера более 1200px.

width: 200px;

Ширина стикера. Если он слшком большой для вас - просто укажите размер по меньше.

z-index: 5000;

Значение отвечающие за наложение стикера поверх основного контента сайта.
Так как в DLE модальные/диалоговые окна находятся в пределах z-index: 1050, и у bootstrap 3 примерно там же, то значение в 5000 гарантирует полное перекрытие.

top: 30%;

Картинка Санты будет в 30% сверху от высоты окна браузера.

left: 1px;

Картинка будет на расстоянии 1px от левого края окна браузера.

Если хотите красивый стикер разместить с правой стороны окна, то код стоит поменять на

div id="ny_olen">
	<img src="https://tcse-cms.com/uploads/olen.png" class="img-responsive">
</div>

<style type="text/css">
    #ny_olen {
        position: fixed;
        top: 30%;
        right: 1px;
        display: block;
        width: 125px;
        z-index: 5000;
    }
</style>


тут уже используется другая картинка с Оленем.



Вывод обоих вариантов адаптирован для фреймворка bootstrap 3 и тестировался на DLE 13.1

Демо-версия доступна на странице Портфолио
Перезагрузка страницы портфолио выдает по очереди или Санту или Оленя.


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.


25 декабря 2018  0 125   новый год анимация Версия для печати


Похожие публикации

Снег на сайте для DLE

Очередная реализация снежинок для сайта - создаем новогоднее настроение средствами JS. Вывод снежинок организуем через раздел админки "управление рекламой", тем более, что весь код помещается внутри... читать далее

Версия сайта для слабовидящих - как сделать для DLE

Если вам приходилось разрабатывать сайт для государственных учреждений РФ, то вы уже должны знать о требовании к специализированной версии сайта для слабовидящих. Скрипт "версии для слабовидящих"... читать далее

Снег на сайте - Jquery плагин

Наиболее современный способ реализации падающего снега на вашем сайте, работающем на движке DLE. Все, что требуется - распаковать архив из новости, загрузить папку со скриптами в шаблон сайта и... читать далее

Падающий снег на сайт с помощью jQuery

Еще один способ сделать падающие снежинки на сайт в канун Нового года. В этот раз помог сайт my-dle.ru на котором и был обнаружен данный скрипт Для работы скрипта необходима библиотека Jquery... читать далее

Как сделать падающий снег на сайте (вариант 2)

Для всех тех, кто хочет видеть на своем сайте пдающий снег, но кому не подошел вариант описанный в новости "скрипт падающего снега для ДЛЕ" предлагаю к рассмотрению второй вариант. Он не требует... читать далее

Скрипт падающего снега на сайте

Скрипт падающего снега обычно используют перед новым годом Собственно все элементарно! В тело html страницы вставляем Ява-скрипт и на сайте уже падает снег. Но я предлагаю более изящное решения для... читать далее

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте