Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: ZAP-effect

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: js
DeepVarvar Супермодератор
Отправлено: 28 Октября, 2012 - 14:44:10
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)




Вот было дело, с месяц назад, делал сайт-страничку.
Дизайнер постарался, полет фантазии. Красота.
А мне вдруго тоже захотелось добавить "жизни" в этот сайт.
Т.к. сайт посвящен лампочкам, идея пришла сама собой.
Решил сделать эффект похожий на то, как загорается люминесцентная лампа.
Долго ковырял амплитуды и частоты. Искал готовые примеры, но все это было не то.
Я обратился за помощью в интересной задаче к пользователю DITA.
Ему тоже стало интересно. Вот собственно он то и предложил интересный выход из положения. Никаких вам амплитуд и частот не нужно, все делается с помощью двух таймаутов. И это смотрится гораздо лучше чем отработка по формулам, да и ресурсов жрет там мало, что и не заметно.

Вот тут живой пример: http://xenonru[dot]ru/
Правда он обвязан еще доп. ф-ционалом.
Практически все картинки кликабельны.

Я оформил его в виде jquery-плагина:
CODE (javascript):
скопировать код в буфер обмена
  1. (function($) {
  2.  
  3.     $.fn.zap = function(params) {
  4.  
  5.         var rand = function(min, max) {
  6.             return Math.floor( Math.random() * (max - min + 1) ) + min;
  7.         };
  8.  
  9.         var zapper = function(target) {
  10.  
  11.             target.zapCallback(1);
  12.  
  13.             if(isNaN(params.count) || params.count < 1) {
  14.                 return;
  15.             }
  16.  
  17.             setTimeout(function() {
  18.  
  19.                 zapper(target);
  20.                 params.count--;
  21.  
  22.             }, rand(100, 120));
  23.  
  24.             setTimeout(function() {
  25.                 target.zapCallback(0);
  26.             }, 160);
  27.  
  28.         };
  29.  
  30.         if (typeof params == "undefined") {
  31.             params = {};
  32.         }
  33.  
  34.         params.count = parseInt(params.count) || rand(3, 4);
  35.  
  36.         if (typeof params.callback == "undefined") {
  37.             return alert("Zap-effect expects callback!");
  38.         }
  39.  
  40.         $.fn.zapCallback = params.callback;
  41.  
  42.         this.each(function() {
  43.             zapper($(this));
  44.         });
  45.  
  46.     };
  47.  
  48. })(jQuery);

Использовать, например, так:
CODE (javascript):
скопировать код в буфер обмена
  1. elem.zap({callback:function(s){
  2.     elem.css({backgroundPosition:!s?'center -204px':'center 0px'});
  3. }});

Как видно из примера, callback-toggler получает 2 состояния, 1 и 0, и по ним можно делать все что вашей душе угодно. Callback выполняется N раз, как бы без вашего ведома. Если объяснять поведение плагина на примере включающейся лампочки, то она сперва мигает, а затем загорается и остается зажженной.
Параметр всего один: Кол-во "миганий".
Ранее был и второй параметр - скорость мигания, но я его убрал.

Как оно вам?

(Отредактировано автором: 28 Октября, 2012 - 14:48:21)

 
 Top
AlexAnder
Отправлено: 28 Октября, 2012 - 15:06:14
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 915
Дата рег-ции: Авг. 2012  
Откуда: Россия


Помог: 34 раз(а)






-----
Оказывается, недостаточно читать справочники, чтобы правильно писать коды. sadex ©

Форумы стали местом обучения программированию, а не решения трудных вопросов. KingStar ©
 
 Top
DeepVarvar Супермодератор
Отправлено: 28 Октября, 2012 - 15:12:53
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)




ВТФ? Закатив глазки
 
 Top
AlexAnder
Отправлено: 28 Октября, 2012 - 15:13:29
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 915
Дата рег-ции: Авг. 2012  
Откуда: Россия


Помог: 34 раз(а)




DeepVarvar пишет:
ВТФ? Закатив глазки

GIF Подмигивание
Спойлер (Отобразить)

(Отредактировано автором: 28 Октября, 2012 - 15:18:37)



-----
Оказывается, недостаточно читать справочники, чтобы правильно писать коды. sadex ©

Форумы стали местом обучения программированию, а не решения трудных вопросов. KingStar ©
 
 Top
DeepVarvar Супермодератор
Отправлено: 28 Октября, 2012 - 15:17:01
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)




Не моргнуло Закатив глазки
Кроме того я не ограничивался у себя сменой картинки, управлять можно чем угодно, а не только морганием. А картинку кстати еще и подгрузить придется в вашем случае. Нехорошо..
 
 Top
AlexAnder
Отправлено: 28 Октября, 2012 - 15:17:57
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 915
Дата рег-ции: Авг. 2012  
Откуда: Россия


Помог: 34 раз(а)




Цитата:
Кроме того я не ограничивался у себя сменой картинки, управлять можно чем угодно, а не только морганием. А картинку кстати еще и подгрузить придется в вашем случае. Нехорошо..

я не спорю, что Ваш вариант лучше Улыбка


-----
Оказывается, недостаточно читать справочники, чтобы правильно писать коды. sadex ©

Форумы стали местом обучения программированию, а не решения трудных вопросов. KingStar ©
 
 Top
DeepVarvar Супермодератор
Отправлено: 28 Октября, 2012 - 15:18:42
Post Id



Активный участник


Покинул форум
Сообщений всего: 10377
Дата рег-ции: Дек. 2008  
Откуда: Альфа Центавра


Помог: 353 раз(а)




И да - zap моргает всегда по разному, а не тупо как зашили в гифку.
(Добавление)

Что-то я рьяно его защищаю... Все, молчу... Радость
 
 Top
DlTA
Отправлено: 29 Октября, 2012 - 09:19:11
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2952
Дата рег-ции: Окт. 2010  


Помог: 53 раз(а)




к тонкостям функционала: вся красота фичи заключается в том что промежуток времени между морганиями "случайны" желающие поиграться попробуйте установить число 7-10 именно на таком количестве это лучше всего заметно.
то есть промежуток между морганиями, зависит от количества которое еще над выполнить и случайного значения.
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Пользовательские функции »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB