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
Форумы портала PHP.SU :: Версия для печати :: ZAP-effect
Форумы портала PHP.SU » PHP » Пользовательские функции » ZAP-effect

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

1. DeepVarvar - 28 Октября, 2012 - 14:44:10 - перейти к сообщению
Вот было дело, с месяц назад, делал сайт-страничку.
Дизайнер постарался, полет фантазии. Красота.
А мне вдруго тоже захотелось добавить "жизни" в этот сайт.
Т.к. сайт посвящен лампочкам, идея пришла сама собой.
Решил сделать эффект похожий на то, как загорается люминесцентная лампа.
Долго ковырял амплитуды и частоты. Искал готовые примеры, но все это было не то.
Я обратился за помощью в интересной задаче к пользователю 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 раз, как бы без вашего ведома. Если объяснять поведение плагина на примере включающейся лампочки, то она сперва мигает, а затем загорается и остается зажженной.
Параметр всего один: Кол-во "миганий".
Ранее был и второй параметр - скорость мигания, но я его убрал.

Как оно вам?
2. AlexAnder - 28 Октября, 2012 - 15:06:14 - перейти к сообщению

3. DeepVarvar - 28 Октября, 2012 - 15:12:53 - перейти к сообщению
ВТФ? Закатив глазки
4. AlexAnder - 28 Октября, 2012 - 15:13:29 - перейти к сообщению
DeepVarvar пишет:
ВТФ? Закатив глазки

GIF Подмигивание
Спойлер (Отобразить)
5. DeepVarvar - 28 Октября, 2012 - 15:17:01 - перейти к сообщению
Не моргнуло Закатив глазки
Кроме того я не ограничивался у себя сменой картинки, управлять можно чем угодно, а не только морганием. А картинку кстати еще и подгрузить придется в вашем случае. Нехорошо..
6. AlexAnder - 28 Октября, 2012 - 15:17:57 - перейти к сообщению
Цитата:
Кроме того я не ограничивался у себя сменой картинки, управлять можно чем угодно, а не только морганием. А картинку кстати еще и подгрузить придется в вашем случае. Нехорошо..

я не спорю, что Ваш вариант лучше Улыбка
7. DeepVarvar - 28 Октября, 2012 - 15:18:42 - перейти к сообщению
И да - zap моргает всегда по разному, а не тупо как зашили в гифку.
(Добавление)

Что-то я рьяно его защищаю... Все, молчу... Радость
8. DlTA - 29 Октября, 2012 - 09:19:11 - перейти к сообщению
к тонкостям функционала: вся красота фичи заключается в том что промежуток времени между морганиями "случайны" желающие поиграться попробуйте установить число 7-10 именно на таком количестве это лучше всего заметно.
то есть промежуток между морганиями, зависит от количества которое еще над выполнить и случайного значения.

 

Powered by ExBB FM 1.0 RC1