Снег на сайте для DLE
<!-- Снег на сайте -->
<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="❄";
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.
Создаем новый банер

Если вы не меняли адрес своей админки тогда ссылку будет вида /admin.php?mod=banners
Название баннерного поля - snow
Описание баннера - по своему вкусу
Дата окончания: - логичным автоматически отключить после рождества. но это дело вкуса, данное поле можно вообще не трогать.
Код баннера
Вставляем код указанный выше.
Создаем банер.
2.
Добавляем тег вывода банера в шаблон сайта
В нашем случае тег банера {banner_snow}
добавляем в шаблон main.tpl
перед
</body>
получается примерно так

Снег на сайте готов и работает.
3.
Настройки скрипта
Данный скрипт позволяет настроить несколько параметров по своему вкусу:
все они редактируются в коде "банера"
Где
Максимальное количество снежинок одновременно отображаемых на экране
Цвета снежинок.
Шрифт, которым выводтся снежинка, так как на самом деле падать может что угодно, а не только классические снежинки.
Символ снежинки в десятичном коде. Варианты снежинок можно посмотреть тут
Сейчас на сайте выводится
Скорость падения снежинок. Чем больше число - тем быстрее падает.
Максимальный размер снежинки
Минимальный размер снежинки
Область выпадения снега:
1 - по всей ширине
2 - в левой половине экрана
3 - в центральной трети экрана
4 - в правой половине экрана
Другие версии снега на сайте доступны по ссылке tcse-cms.com/tags/снег+на+сайте/
Демонстрация работы скрипта в разделе Портфолио
С наступающим.
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.
Похожие публикации
Как сделать падающий снег на сайте (вариант 2)
Для всех тех, кто хочет видеть на своем сайте пдающий снег, но кому не подошел вариант описанный в новости "скрипт падающего снега для ДЛЕ" предлагаю к рассмотрению второй вариант. Он не требует... читать далее
Скрипт падающего снега на сайте
Скрипт падающего снега обычно используют перед новым годом Собственно все элементарно! В тело html страницы вставляем Ява-скрипт и на сайте уже падает снег. Но я предлагаю более изящное решения для... читать далее
Падающий снег на сайт с помощью jQuery
Еще один способ сделать падающие снежинки на сайт в канун Нового года. В этот раз помог сайт my-dle.ru на котором и был обнаружен данный скрипт Для работы скрипта необходима библиотека Jquery... читать далее
Снег на сайте - Jquery плагин
Наиболее современный способ реализации падающего снега на вашем сайте, работающем на движке DLE. Все, что требуется - распаковать архив из новости, загрузить папку со скриптами в шаблон сайта и... читать далее
HTML parser Jquery style
Наткнулся на вот такой полезный класс, любителям chained вызовов и jquery понравится очень! PHP Simple HTML DOM Parser: simplehtmldom.sourceforge.net/ Примеры: // Find all anchors, returns a array of... читать далее
Оформление заглушки для сайта на время его обновления или ремонта
Время от времени возникает необходимость отключить сайт для проведения профилактических работ по обновлению скриптов. В движке ДЛЕ для этого есть специальный шаблон, позволяющий выводить статическую... читать далее
Прокомментировать
Облако тегов
angular CSS css es6 frontend habrahabr.ru HTML html html5 JavaScript javascript js react ReactJS seo SEO на Хабрахабре skillfactory vue Блог компании RUVDS.com Блог компании SkillFactory Веб-дизайн Дизайн Интернет-маркетинг Поисковая оптимизация Программирование Разработка веб-сайтов Уроки CSS на Хабрахабре автомобильный сайт браузеры верстка вёрстка дайджест дизайн интернет-магазин корпоративный сайт модуль разработка ссылки фронтенд
Реклама на сайте
аренда джипов на свадьбу