<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Падающий снег на JavaScript

Падающий снег на JavaScript

Описание: Сегодня решил подготовить актуальный на текущий день скрипт. На улице зима, идёт снег, и мне показалось, что многие Web-мастера тоже хотели бы, чтобы на их сайтах падали снежинки. Представляю Вашему вниманию скрипт "Падающий снег на JavaScript". Преимущества скрипта в том, что ему не нужно никаких сторонних картинок, ведь снежинка - это обычная "*". Поэтому данный скрипт очень хорош, и если Вы хотите создать зимнюю атмосферу у себя на сайте, то можете копировать данный скрипт и вставлять его на своём сайте.

Код JavaScript (вставлять между тегами <head> и </head>):

<script language="JavaScript">
// Максимальное количество снежинок
var snowmax=40;
var snowcolor=new Array("#AAAACC","#DDDDFF","#CCCCDD","#F3F3F3","#F0FFFF");
var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS");
var snowletter="*";
//Скорость
var sinkspeed=0.5;
//Максимальный размер снежинок
var snowmaxsize=30;
//Минимальный размер снежинок
var snowminsize=8

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/);

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;
    snow[i].style.color=snowcolor[randommaker(snowcolor.length)];
    snow[i].sink=sinkspeed*snow[i].size/5;
    snow[i].posx=randommaker(marginright-snow[i].size);
    snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size);
    snow[i].style.left=snow[i].posx;
    snow[i].style.top=snow[i].posy;
  }
  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]);
    snow[i].style.top=snow[i].posy;
    if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])) {
      snow[i].posx=randommaker(marginright-snow[i].size);
      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+"'>"+snowletter+"</span>")
}
</script>

Код HTML (вставлять между тегами <body onLoad = "initsnow()"> и </body>):

<p style = "text-align: center;">Идёт снег...</p>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (24):

sync.o sync.o 03.05.2011 17:34:02

почему-то работает только в IE(( и почему-то мне не видно комментов других пользователей(( то же самое и с форумом((

Ответить

Admin Admin 03.05.2011 20:53:02

В Firefox 3.6.17 также работает и в любом современном браузуре тоже. Комментарии других пользователей Вы видите, обратного быть не может. Если нет комментариев, значит, к этой статье комментариев вообще нет. А форум только появился, и там вообще нет ни одного сообщения.

Ответить

sync.o sync.o 04.05.2011 11:15:49

Разобрался в чем проблема. Скрипт работал в IE8 и НЕ работал в: Opera 11.10 Safari 5.0.4 Firefox 4.0 Chrome 11.0. по той простой причине, что координаты снежинок были без 'px'. Стоило добавить в 2-х строчках функции movesnow() вот это: + 'px' - и все везде вдруг заработало))) Для большей наглядности можно в body вставить не параграф, а блок: <div style = "text-align: center; color: #bbf; height: 700px; background: #55f">Идёт снег...</div> А скрипт мне очень понравился, спасибо!

Ответить

RussianPro RussianPro 12.10.2011 23:45:06

В каких строчках добавить + 'px'? Или просто напишите фрагмент кода где вставлять нужно.

Ответить

sync.o sync.o 13.10.2011 21:29:21

дописать волшебные символы + 'px' нужно везде, где определяется позиция снежинок по горизонтали и вертикали (style.left и style.top)

Ответить

RussianPro RussianPro 13.10.2011 21:38:41

Всё равно не работает!

Ответить

sync.o sync.o 13.10.2011 21:50:46

а body onLoad не забыл вставить?)

Ответить

RussianPro RussianPro 13.10.2011 21:51:26

и что в onLoad написать?

Ответить

sync.o sync.o 13.10.2011 21:53:21

я сдаюсь(( в статье же все есть...

Ответить

RussianPro RussianPro 13.10.2011 22:00:46

Сделал всё как в статье! Поставил + 'px'. Всё равно ничего не работает! Скиньте полный код скрипта с добавленными + 'px' если вам не составит труда на e-mail: nikich-kust@yandex.ru

Ответить

hed_honey hed_honey 28.11.2011 21:36:15

Могу и я Вас попросить скинуть полныЙ код мне на мейл. Я сделала отдельный скрипт и его закинула в html файл. В опере и IE все ок, но в гугл хром не работает:((. Если не составит труда, скиньте, пожалуйста, на мейл: elvira_vn@rambler.ru

Ответить

Admin Admin 28.11.2011 22:31:31

Это и есть полный код скрипта. И в Chrome должно работать (у меня версия 15.0.874.121 m). Попробуйте удалить DOCTYPE, иногда это помогает.

Ответить

hed_honey hed_honey 30.11.2011 23:38:54

Удалила, но все равно не помогло(( В хроме упорно не работает. А спросила я насчет полного скрипта т.к. выше пользователь Сева писал, что надо добавить + 'px'. Просто видно я не поняла куда именно надо добавить, так как вставляла, но и это не помогло(( P.S. После удаления Doctype снег идет только на верхней части страницы, после чего тает((

Ответить

RussianPro RussianPro 10.12.2011 22:55:28

У меня работало в хроме! Только это было давно, я не помню что сделал чтобы заработало. P.S. Теперь у меня скрипт ни в одном браузере не пашет!

Ответить

Drug Drug 15.01.2012 01:59:33

snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+ 'px' ; snow[i].style.top=snow[i].posy + 'px' ; но опять таки, смотрится красиво и как я понимаю корректо только в IE (снегопад кажется трехмерным из-за того что снежинки имеют разную величину, в хроме все снежинки одинаковы, из-за чего эффект менее наглядный). Изучением Java занялся недавно, поэтому щас буду пробовать сам разобраться, а так кто соображает больше чем я сейчас, можете помочь) ЗЫ Неделю убил поиском подобного сайта, так ничего и не нашел, чисто случайно сюда попал и очень рад этой случайности. Спасибо автору за материалы выложенные на сайте, а главное за манеру и форму описания. Зачет!

Ответить

Transerfer Transerfer 25.02.2012 19:54:51

Здравствуйте, Михаил! Спасибо за красивый скрипт. Скажите, а можно падающие звёздочки заменить чем-либо другим, например простеньким img?

Ответить

Admin Admin 25.02.2012 20:27:12

Да, причём очень легко. Достаточно заменить строку var snowletter="*"; на var snowletter="<img src='img.jpg' />"; Где img.jpg - путь к нужному изображению.

Ответить

Transerfer Transerfer 26.02.2012 09:56:21

Спасибо за оперативный ответ. Ещё вопрос: почему в Опере звездочки находятся на белом фоне, как-будто нарисованы на маленьких карточках, это можно как-то исправить?

Ответить

Admin Admin 26.02.2012 12:35:30

Не заметил подобных проблем.

Ответить

meleniesi meleniesi 18.12.2012 16:06:25

Снег на сайт и еще много скриптов для украшения сайтов есть на бесплатном сервисе http://www.darii.ru

Ответить

fred fred 04.01.2013 23:47:31

Попробовал испытать предлагаемый скрипт. Те, кто писал о проблемах – были правы. С первого раза получились две недвижимые снежинки. Проблема решилась только после того, как убрал строку кода DOCTYPE, как и советовал Михаил. В четырех браузерах снежная сказка удалась! Ну как до этого можно было додуматься!!! А вот при замене «буквы» на картинку все снежинки стали одного размера. Хотя количество и скорость регулируются. Сильно подозреваю, что под изменение размера картинки скрипт не заточен. Что скажете, Михаил? И еще. После строки, объявляющей переменную var snowminsize=8, не стоит точка с запятой. Но, похоже, на работоспособность кода это не влияет.

Ответить

1111g 1111g 14.10.2014 20:04:51

У меня только * на правом верхнем углу стоит но скрипт не читается

Ответить

v79.08 v79.08 19.01.2015 22:51:35

хороший скрипт. я лично шустро разобрался што и где надо поставеть. только вот немогу понять одного почему при наличии ДОКТАЙПА он неработает, а сайт без доктайпа (ну согласитесь это несерьёзно) хотелось бы узнать как это исправеть?

Ответить

Bagi Bagi 06.03.2016 22:14:50

Классная фишка со снегом, работает в Опере, Мозиле, Хроме и IE. Только вот снежинки действительно не до конца падают, может если Михаил разобрал бы для нас теоретическую сторону скрипта, мы смогли бы сами решить эту проблемку...) Что-то я заметил, что во многих комментах Михаил отвечал в последний раз в 2013 году, а в настоящее время что случилось...времени нет на своих читателей??? В целом сайт зачет!!!

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.