Дизайнер постарался, полет фантазии. Красота.
А мне вдруго тоже захотелось добавить "жизни" в этот сайт.
Т.к. сайт посвящен лампочкам, идея пришла сама собой.
Решил сделать эффект похожий на то, как загорается люминесцентная лампа.
Долго ковырял амплитуды и частоты. Искал готовые примеры, но все это было не то.
Я обратился за помощью в интересной задаче к пользователю DITA.
Ему тоже стало интересно. Вот собственно он то и предложил интересный выход из положения. Никаких вам амплитуд и частот не нужно, все делается с помощью двух таймаутов. И это смотрится гораздо лучше чем отработка по формулам, да и ресурсов жрет там мало, что и не заметно.
Вот тут живой пример: http://xenonru[dot]ru/
Правда он обвязан еще доп. ф-ционалом.
Практически все картинки кликабельны.
Я оформил его в виде jquery-плагина:
CODE (javascript):
скопировать код в буфер обмена
скопировать код в буфер обмена
- (function($) {
- $.fn.zap = function(params) {
- var rand = function(min, max) {
- return Math.floor( Math.random() * (max - min + 1) ) + min;
- };
- var zapper = function(target) {
- target.zapCallback(1);
- if(isNaN(params.count) || params.count < 1) {
- return;
- }
- setTimeout(function() {
- zapper(target);
- params.count--;
- }, rand(100, 120));
- setTimeout(function() {
- target.zapCallback(0);
- }, 160);
- };
- if (typeof params == "undefined") {
- params = {};
- }
- params.count = parseInt(params.count) || rand(3, 4);
- if (typeof params.callback == "undefined") {
- return alert("Zap-effect expects callback!");
- }
- $.fn.zapCallback = params.callback;
- this.each(function() {
- zapper($(this));
- });
- };
- })(jQuery);