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

Скрипты и советы | 25 декабря 2018

новый год, анимация


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

Порядок создания банера аналогичный описанному в статье Снег на сайт для 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

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

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

Подробнее
Снег на сайте для DLE

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

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

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

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

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

Подробнее
Снег на сайте - Jquery плагин

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

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

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

Подробнее

Написать комментарий

  • Смайлы и люди
    Животные и природа
    Еда и напитки
    Активность
    Путешествия и места
    Предметы
    Символы
    Флаги