Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

"Снегопад" (AKS)
Author Message
AKS
Участник форума



Joined: 28 Dec 2005
Posts: 1174
Карма: 102
   поощрить/наказать


PostPosted: Fri Dec 01, 2006 2:35 pm (написано за 11 минут 53 секунды)
   Post subject: "Снегопад"
Reply with quote

Эффект "снегопада" в окне браузера - тема давно и благополучно забытая. Не знаю, как так случилось, но я взял и "нарисовал" еще один (бог знает какой по счету) "снегопад". Видимо виной тому - слишком рано появившееся предпраздничное настроение.
Я решил попытаться сделать все "по-взрослому", руководствуясь принципами ООП. В результате с "дуру" я создал для каждой "снежинки" свой собственный объект, но, как раз, без этого было бы не интересно. Более того, захотелось еще и поделиться своим интересом с остальными. Весь этот "интерес" - в архиве.

19.04.07.
Добавил архив со сценарием участника форума Ksnk (forum.dklab.ru/profile.php?mode=viewprofile&u=4057), который он написал по ходу обсуждения этой темы. Я взял на себя смелость переименовать его архив в Animation.zip, т.к. там не только "снегопады", но и вертолеты, и планеты со спутниками, и многое другое. Вот уж действительно - вещь, достойная внимания, так что "не проходите мимо"!


Animation.zip
 Description:
При моделировании движения объектов используется "физическая" модель, при которой сначала вычисляются все действующие в системе силы, а затем уже изменяется скорость объекта и его координаты.

snow.html - аналог snowfall, а test.html - стенд для отладки

Download
 Filename:  Animation.zip
 Filesize:  107.35 KB
 Downloaded:  1797 Time(s)


seasons.rar
 Description:
Немного переделанный сценарий.

Download
 Filename:  seasons.rar
 Filesize:  28.01 KB
 Downloaded:  1572 Time(s)


snowfall.rar
 Description:

Download
 Filename:  snowfall.rar
 Filesize:  14.84 KB
 Downloaded:  2477 Time(s)



Last edited by AKS on Thu Apr 19, 2007 8:13 pm; edited 8 times in total
Back to top
View user's profile Send private message Send e-mail
AKS
Участник форума



Joined: 28 Dec 2005
Posts: 1174
Карма: 102
   поощрить/наказать


PostPosted: Sat Dec 02, 2006 1:48 pm (спустя 23 часа 13 минут; написано за 7 минут 56 секунд)
   Post subject:
Reply with quote

Rumata
Quote:
если я захочу своих снежинок вместо звездочек? как мне быть?
Как быть? ;)
Я чуть-чуть изменил сценарий, дополнил опций, чтобы можно было использовать изображения.
Вобщем, все как обычно:
1. выбираете булево значение - использовать изображения или текстовые символы
2. устанавливаете кол-во изображений, имеющихся в распоряжении (они, естественно, будут повторяться - не делать же, например, 50 изображений)
3. указываете адрес для файлов изображений и используемое расширение для этих файлов.
Back to top
View user's profile Send private message Send e-mail
Ksnk
Участник форума



Joined: 24 Jun 2005
Posts: 459
Карма: 49
   поощрить/наказать

Location: СПб

PostPosted: Mon Feb 26, 2007 6:53 pm (спустя 2 месяца 24 дня 5 часов 5 минут; написано за 31 секунду)
   Post subject:
Reply with quote

Переделать, к сожалению, не получилось :( зато написалось чего-то свое. Пока еще с соплями, в виде недооформленых глобальных процедур, но вот. Если вкратце - то
Quote:
...При моделировании движения объектов используется "физическая" модель, при которой сначала вычисляются все действующие в системе силы, а затем уже изменяется скорость объекта и его координаты.
snow.html - аналог snowfall, а test.html - стенд для отладкт таких моделей.


snow.zip
 Description:
версия от 27.02.2007

Download
 Filename:  snow.zip
 Filesize:  106.6 KB
 Downloaded:  1255 Time(s)



Last edited by Ksnk on Tue Feb 27, 2007 3:48 pm; edited 2 times in total
Back to top
View user's profile Send private message Send e-mail
Ant
Сотрудник «Лаборатории»



Joined: 17 Jun 2003
Posts: 6840
Карма: 131
   поощрить/наказать


PostPosted: Thu Apr 19, 2007 3:07 pm (спустя 1 месяц 20 дней 20 часов 14 минут; написано за 41 секунду)
   Post subject:
Reply with quote

Вообще, было бы прикольно сделать реакцию движения снежинок и листьев на движение мыши. Как на ветер. (-:
Back to top
View user's profile Send private message Send e-mail
AKS
Участник форума



Joined: 28 Dec 2005
Posts: 1174
Карма: 102
   поощрить/наказать


PostPosted: Thu Apr 19, 2007 6:04 pm (спустя 2 часа 57 минут; написано за 1 минуту 57 секунд)
   Post subject:
Reply with quote

Ant wrote:
сделать реакцию движения снежинок и листьев на движение мыши
Для Ksnk - это проще простого. Ведь в его примере уже есть подобный эффект - "привязанная к курсору цепочка". Мне кажется, что модель поведения этой самой "цепочки" как раз можно использовать...
Back to top
View user's profile Send private message Send e-mail
Ksnk
Участник форума



Joined: 24 Jun 2005
Posts: 459
Карма: 49
   поощрить/наказать

Location: СПб

PostPosted: Thu Apr 19, 2007 8:02 pm (спустя 1 час 57 минут; написано за 6 минут 3 секунды)
   Post subject:
Reply with quote

Ant
Легко! ;-)
AKS
Ну, примерно так. Однако - проще оказалось состряпать новый объект. ;)
Версия несколько поменялась вместе с моими предпочтениями в скриптописании, и понимании задачи вообще, так что, наверное, лучше заменить и архив сверху.
- добавлен объект wind, который по ближайшем рассмотрении не является ветром, однако примерно похож.
- множественные, мелкие и не очень коррекции
- новый объект введен в схему "падающий снег" и "вертолет". Теперь, при желании, можно лепить снежки и спасать вертолет от ракет.

Кстати - файл snow.js некорректно пакуется tricky scripter'ом, так что вот!


snow.zip
 Description:
версия от 19.04.2007

Download
 Filename:  snow.zip
 Filesize:  107.35 KB
 Downloaded:  1247 Time(s)

Back to top
View user's profile Send private message Send e-mail
bæv
Модератор «Дзена»



Joined: 27 Aug 2003
Posts: 7275
Карма: 9986
   поощрить/наказать


PostPosted: Tue Nov 18, 2008 8:56 pm (спустя 1 год 6 месяцев 29 дней 54 минуты)
   Post subject:
Reply with quote


М

Ветка выделена в отдельную тему «"Снегопад" [Обсуждение]»,
расположенную в форуме Разное :: JavaScript (18 Ноября 2008, 20:56).
Back to top
View user's profile Send private message
AMBA
Заглянувший



Joined: 12 Jan 2004
Posts: 4
Карма: -2
   поощрить/наказать


PostPosted: Wed Dec 17, 2008 10:25 pm (спустя 29 дней 1 час 28 минут; написано за 13 минут 5 секунд)
   Post subject:
Reply with quote

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

Единственное хорошо, что он кроссбраузерным у вас получился.

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

Конфигурирование снегопада надо бы сделать всё в одном месте, и более адекватное и разнообразное. К позиционированию добавить z-index. Вообщем чтобы ваш снег можно было повесить на сайт, и он красиво и не нагружающе падал, в полёте плавно кружился и главное чтобы на него не влияла прокрутка экрана.
Code (JavaScript): скопировать код в буфер обмена
         <script>
         var snowmax=25  // Set the number of snowflakes (more than 30 - 40 not recommended)
         var snowcolor=["#c4bbcc","#ccddFF","#ccd6DD"]
         // Set the colors for the snow. Add as many colors as you like
         var snowtype=["Arial Black","Arial Narrow","Times","Comic Sans MS"]
         // Set the fonts, that create the snowflakes. Add as many fonts as you like
         var snowletter=["<img src='http://sosna.com.ua/i/s1.gif'>","<img src=http://sosna.com.ua/i/s2.gif>"];
         // Set the letter that creates your snowflake (recommended:*)
         var sinkspeed=0.3   // Set the speed of sinking (recommended values range from 0.3 to 2)
         var snowmaxsize=45  // Set the maximal-size of your snowflaxes
         var snowminsize=18  // Set the minimal-size of your snowflaxes
         var snowsizerange=snowmaxsize-snowminsize
         // Set the snowing-zone
         // Set 1 for all-over-snowing, set 2 for left-side-snowing
         // Set 3 for center-snowing, set 4 for right-side-snowing
         var snowingleft=0.1 //левая граница присутствия снега
         var snowingwidth=0.9    //ширина присутствия снега в окне
         var opac=0.35       //непрозрачность снега (0.0-1.0), при 1.0 в 2 раза быстрее работает.
         var stepTime=140    //шаг покадровой анимации (мсек). При менее 100 сильно нагружает процессор
         var snow=new Array()
         var marginbottom
         var marginright
         var timer
         var x_mv=new Array();   var crds=new Array();   var lftrght=new Array();
         var browserinfos=navigator.userAgent
         d=document
         var isOpera=self.opera 
         var ie5=d.all&&d.getElementById&&!isOpera
         var ns6=d.getElementById&&!d.all
         var browserok=ie5||ns6||isOpera
         function randommaker(range){return Math.floor(range*Math.random())}
         function botRight()
          {
           if(ie5||isOpera)
                {
                 marginbottom=d.body.clientHeight
                 marginright=d.body.clientWidth;
                }
           else
                if(ns6)
                 {
                  marginbottom=innerHeight; marginright=innerWidth;
                 }
          }
         function checkPgDn()
          {
           scrltop=ns6?pageYOffset:document.body.scrollTop;
          }
         function initsnow()
          {
           checkPgDn();if(ns6)setInterval("checkPgDn()",999);
           botRight();
           for (i=0;i<=snowmax;i++)
                {
                 crds[i] = 0;
                 lftrght[i] = Math.random()*20;
                 x_mv[i] = 0.03 + Math.random()/10;
                 snow[i]=d.getElementById("s"+i)
                 snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
                 snow[i].style.fontSize=snow[i].size=randommaker(snowsizerange)+snowminsize
                 snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                 snow[i].sink=sinkspeed*snow[i].size/5
                 newPosSnow(randommaker(marginbottom-3*snow[i].size));
                }
           movesnow();
          }
         function newPosSnow(y)
          {
           var o;
           snow[i].posx=randommaker(marginright*snowingwidth-2*snow[i].size)+marginright*snowingleft
           snow[i].posy=y+(ns6?pageYOffset:d.body.scrollTop);
           snow[i].size=randommaker(snowsizerange)+snowminsize;
           if(snow[i].hasChildNodes()&&(o=snow[i].childNodes[0]).tagName=='IMG') o.width=o.height=randommaker(snowsizerange/1.6)+snowminsize;
          }
         function movesnow()
          {
           for (i=0;i<=snowmax;i++)
                {
                 snow[i].style.top=snow[i].posy+=snow[i].sink+lftrght[i]*Math.sin(crds[i])/3;
                 crds[i] += x_mv[i];
                 snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
                 if(snow[i].posy>=marginbottom-3*snow[i].size+scrltop || parseInt(snow[i].style.left)>(marginright-3*lftrght[i]))newPosSnow(0);
                }
           var timer=setTimeout("movesnow()",stepTime)
          }
         for (i=0;i<=snowmax;i++)
          {
           d.write("<span id='s"+i+"' style='position:absolute;z-index:1000;"+(opac<1?"-moz-opacity:"+opac+";filter:alpha(opacity="+(opac*100)+")":"")+";top:-"+snowmaxsize+"'>"
           +snowletter[Math.floor(snowletter.length*Math.random())]+"</span>")
          }           //-moz-opacity:0.5;filter:alpha(opacity=50);
         onload=function()
          {
           if(browserok)setTimeout("initsnow()",99);
          }
         onmousewheel = onscroll = function(){checkPgDn()}
         onresize = function(){botRight();}
         </script>
Back to top
View user's profile Send private message
bæv
Модератор «Дзена»



Joined: 27 Aug 2003
Posts: 7275
Карма: 9986
   поощрить/наказать


PostPosted: Tue Dec 23, 2008 6:26 am (спустя 5 дней 8 часов 1 минуту)
   Post subject:
Reply with quote


М

Ветка выделена в отдельную тему «сугробы»,
расположенную в форуме Разное :: JavaScript (23 Декабря 2008, 06:26).
Back to top
View user's profile Send private message
Александр Михалицын
Модератор



Joined: 23 May 2008
Posts: 1299
Карма: 83
   поощрить/наказать


PostPosted: Wed Jan 14, 2009 6:47 pm (спустя 22 дня 12 часов 21 минуту; написано за 21 секунду)
   Post subject:
Reply with quote

Новая версия моей реализации снегопада.


snow.zip
 Description:
v.2.7

Download
 Filename:  snow.zip
 Filesize:  5.32 KB
 Downloaded:  1088 Time(s)

Back to top
View user's profile Send private message Send e-mail
Dron23
Заглянувший



Joined: 28 Dec 2010
Posts: 1
Карма: 0
   поощрить/наказать


PostPosted: Tue Dec 28, 2010 2:21 pm (спустя 1 год 11 месяцев 13 дней 19 часов 34 минуты)
   Post subject:
Reply with quote

Уж очень понравился Ваш снегопад ==> snow.zip v.2.7 Только вот одно но, в скриптах ничего не смыслю, а хотелось чтоб при открытии скрипта сразу шёл снег, а принажатии кнопки (ссылки) снег отключался. (Ну что бы заходишь на сайт а там снег идет, нажал на кнопочку и отключил снегопад.) Такое осуществимо? Буду очень признателен за помощь!
Back to top
View user's profile Send private message
bæv
Модератор «Дзена»



Joined: 27 Aug 2003
Posts: 7275
Карма: 9986
   поощрить/наказать


PostPosted: Thu Jan 19, 2012 10:31 pm (спустя 1 год 22 дня 8 часов 9 минут)
   Post subject:
Reply with quote


М

Ветка выделена в отдельную тему «спам»,
расположенную в форуме Мусоропровод (19 Января 2012, 23:31).
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Page 1 of 1    Email to a Friend.
You cannot post new topics in this forum. You cannot reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML