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

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

анимация, снег на сайте, js, новый год

Для самых нетерпеливых готовый код

<!-- Снег на сайте -->
<script type="text/javascript">
    var snowmax=12;
    var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF","#FFFFFF","#EFF5FF")
    var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS");
    var snowletter="&#10052;";
    var sinkspeed=0.5; 
    var snowmaxsize=55;
    var snowminsize=16;
    var snowingzone=2;


    var snow=new Array();
    var marginbottom;
    var marginright;
    var timer;
    var i_snow=0;
    var x_mv=new Array();
    var crds=new Array();
    var lftrght=new Array();
    var browserinfos=navigator.userAgent;
    var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/);
    var ns6=document.getElementById&&!document.all;
    var opera=browserinfos.match(/Opera/);
    var browserok=ie5||ns6||opera;
    function randommaker(range) {
        rand=Math.floor(range*Math.random());
        return rand;
    }
    function initsnow() {
        if (ie5 || opera) {
            marginbottom=document.body.clientHeight;
            marginright=document.body.clientWidth;
        }
        else if (ns6) {
            marginbottom=window.innerHeight;
            marginright=window.innerWidth;
        }
        var snowsizerange=snowmaxsize-snowminsize;
        for (i=0;i<=snowmax;i++) {
            crds[i]=0;
            lftrght[i]=Math.random()*15;
            x_mv[i]=0.03+Math.random()/10;
            snow[i]=document.getElementById("s"+i);
            snow[i].style.fontFamily=snowtype[randommaker(snowtype/length)];
            snow[i].size=randommaker(snowsizerange)+snowminsize;
            snow[i].style.fontSize=snow[i].size+"px";
            snow[i].style.color=snowcolor[randommaker(snowcolor.length)];
            snow[i].sink=sinkspeed*snow[i].size/5;
            if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
            if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
            if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
            if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
            snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size);
            snow[i].style.left=snow[i].posx+"px";
            snow[i].style.top=snow[i].posy+"px";
        }
        movesnow();
    }
    function movesnow() {
        for(i=0;i<=snowmax;i++) {
            crds[i]+=x_mv[i];
            snow[i].posy+=snow[i].sink;
            snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px";
            snow[i].style.top=snow[i].posy+"px";
            if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])) {
                if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                snow[i].posy=0;
            }
        }
        var timer=setTimeout("movesnow()",50);
    }
    for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"px;'>"+snowletter+"</span>");
    }
    if (browserok) {
        window.onload=initsnow;
    }
 </script>
 <!-- Снег на сайте -->




Ну а для всех остальных инструкция по установке снега на сайт через админку DataLife Engine.

1.

Создаем новый банер


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


Если вы не меняли адрес своей админки тогда ссылку будет вида /admin.php?mod=banners



Название баннерного поля - snow
Описание баннера - по своему вкусу
Дата окончания: - логичным автоматически отключить после рождества. но это дело вкуса, данное поле можно вообще не трогать.

Код баннера
Вставляем код указанный выше.

Создаем банер.

2.

Добавляем тег вывода банера в шаблон сайта



В нашем случае тег банера {banner_snow}
добавляем в шаблон main.tpl
перед

</body>


получается примерно так



Снег на сайте готов и работает.

3.

Настройки скрипта


Данный скрипт позволяет настроить несколько параметров по своему вкусу:

все они редактируются в коде "банера"

Где
var snowmax=12;

Максимальное количество снежинок одновременно отображаемых на экране

var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF","#FFFFFF","#EFF5FF")

Цвета снежинок.

var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS");

Шрифт, которым выводтся снежинка, так как на самом деле падать может что угодно, а не только классические снежинки.

var snowletter="❄";

Символ снежинки в десятичном коде. Варианты снежинок можно посмотреть тут

Сейчас на сайте выводится

var sinkspeed=0.5;

Скорость падения снежинок. Чем больше число - тем быстрее падает.

var snowmaxsize=55;

Максимальный размер снежинки

var snowminsize=16;

Минимальный размер снежинки

var snowingzone=2;

Область выпадения снега:
1 - по всей ширине
2 - в левой половине экрана
3 - в центральной трети экрана
4 - в правой половине экрана


Другие версии снега на сайте доступны по ссылке tcse-cms.com/tags/снег+на+сайте/

Демонстрация работы скрипта в разделе Портфолио

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

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

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

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

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

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

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

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

Подробнее
HTML parser Jquery style

Наткнулся на вот такой полезный класс, любителям chained вызовов и jquery понравится очень! PHP Simple HTML DOM Parser:...

Подробнее
Оформление заглушки для сайта на время его обновления или ремонта

Время от времени возникает необходимость отключить сайт для проведения профилактических работ по обновлению скриптов. В...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями