Скрипт падающих снежинок

Board index phpBBex 1.x Мастерская

Description: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Moderator: Поддержка

Post #1by Heroin » 13.12.2012, 08:06

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

Перебрав несколько разных вариантов остановился вот на этом.

1. Скачиваем скрипт snow.js
2. Кладем его в корень форума
3. Открываем overall_header.html
4. В самом верху пишем <body><script type="text/javascript" src="/snow.js"></script></body>
5. Если в пункте 2 меняли путь, то в пункте 4 надо тоже поменять!
6. обновляем шаблон, вычищаем кеш.
7. обновляем форум ctrl+F5
8. вот пример работы http://forum.craftcar.ru/
Attachments
snow.js
(3.23 KiB) Downloaded 703 times
ЁмоЁВарКутаГин
Heroin M
Topic author, Гуру
Avatar
Age: 30
Location: syzran
Reputation: 39
With us: 5 years 7 months

Post #2by VEG » 13.12.2012, 12:04

100% загрузки ядра процессора при сомнительной красоте. Пожалейте пользователей. :pray:
С наилучшими пожеланиями, Евгений
VEG M
Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 7 months

Post #3by Heroin » 13.12.2012, 12:57

хм. что то я не вижу никакой загрузки. поставил на 1 сайт и на 1 форум. все очень рады. очень поднимает настроение предновогоднее
ЁмоЁВарКутаГин
Heroin M
Topic author, Гуру
Avatar
Age: 30
Location: syzran
Reputation: 39
With us: 5 years 7 months

Post #4by VEG » 13.12.2012, 14:16

Зависит от мощности процессора, количества ядер и разрешения экрана. У меня 2 ядра 2GHz, 1920×1200. Одно ядро загружено полностью.

Вот нагрузка на процессор до захода на ваш форум и после:
Image

А теперь представьте каково пользователям с одноядерным процессором. К слову, на моей старой работе процентов 80 компьютеров были именно с одним ядром, и я тогда возненавидел сайты, которые без какой-либо пользы попусту нагружают процессор. Также, как и пользователи дорогого/ненадёжного мобильного интернета ненавидят сайты, загружающие мегабайты графики и анимации для отображения страниц.

Кстати, этот скрипт глючит в мобильном браузере Android. Все снежинки скапливаются в верхних 20 пикселях и странно мельтешат на одном месте.
С наилучшими пожеланиями, Евгений
VEG M
Администратор
Avatar
Age: 30
Location: Минск, Беларусь
Reputation: 1574
With us: 5 years 7 months

Post #5by factotum » 13.12.2012, 14:38

снежок проходили. так и не нашел ничего "легкого". анимация на js, она такая...
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 7 months

Post #6by Heroin » 13.12.2012, 22:33

VEG wrote:мобильном браузере Android
опера на андройде работает без проблем.

я согласен возможно грузит проц и все такое. предложите другой вариант?
ЁмоЁВарКутаГин
Heroin M
Topic author, Гуру
Avatar
Age: 30
Location: syzran
Reputation: 39
With us: 5 years 7 months

Post #7by factotum » 14.12.2012, 17:32

Heroin wrote:предложите другой вариант?
factotum wrote:так и не нашел ничего "легкого". анимация на js, она такая...
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 7 months

Post #8by Lona » 28.12.2013, 00:17

Heroin,
Сделала, как написано за 3 минуты, красотищщаа ))
Благодарю :clap:
Lona
Мастер
Avatar
Reputation: 5
With us: 4 yaers 4 months

Post #9by factotum » 28.12.2013, 00:44

забытая тема в новом свете - только CSS: http://jsfiddle.net/f92gB/
однако ничего нового - все так же, как в случае с JS, нагрузка на процессор существенна. На десктопах не так чувствительно, а вот для портативных скорее зло, чем приятность - производительность, заряд батареи...
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 7 months

Post #10by Alexandr_ » 29.12.2013, 03:27

factotum wrote:забытая тема в новом свете - только CSS: http://jsfiddle.net/f92gB/
Один из лучших вариантов реализации, но не кроссбраузерный. Лучше всего падающий снег сделать на лого.gif форума, это как для меня. А вообще на сайте должно быть меньше таких вот понтов.
Alexandr_
Бывалый
Reputation: 5
With us: 4 yaers 1 month

Post #11by factotum » 18.05.2014, 20:12

factotum wrote:нагрузка на процессор существенна
[решено!] Использовать window.requestAnimationFrame
Нагрузка на процессор снижается в несколько раз.
немного на русском: http://habrahabr.ru/post/114358/

для себя показалось удобным использовать iscrolljs.com
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 7 months

Post #12by factotum » 19.05.2014, 17:37

http://jsfiddle.net/vralle/f92gB/51/
добавлен iscroll
Attachments
screenshot.3.jpg
FF29
Если "улучшение" стало "граблями" - Вы его переросли
factotum
Гуру
Location: Люксембург
Reputation: 232
With us: 5 years 7 months


Return to Мастерская