Делаем управляемый закат с помощью CSS3 и javascript

[@shsweb]

Хорошая реализация фразы: «Закат Солнца вручную». :)

[@xrays72]

Для наглядности ещё бы добавили функцию, которая в зависимости от текущего времени меняет положение солнца.

[@damirazo]

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

[@namespace]

Кодировочка в заголовке ааааААА!!11 по ссылке — damirazo.narod2.ru/

[@damirazo]

Спасибо, добавил мета-тег с кодировкой.

[@hf35]

>>Как ни странно, но шустрее всего на моей машине пример работал в браузере IE9, чуть похуже обстояли дела в браузере Firefox. В Chrome и Opera заметны некоторые фризы при движении.
Тут раз всё логично — аппаратное ускорение в таких делах решает.

Кстати вместо фильтров рекомендую использовать svg градиенты для ИЕ ie.microsoft.com/testdrive/Graphics/SVGGradientBackgroundMaker/Default.html

[@goshakkk_reborn]

Можно было бы еще обрабатывать событие touchmove (с реализацией, сходной с onDrag). Тогда, например, работало бы на iOS/Android устройствах (ну и не забыть прописать viewport).

[@theRavel]

Могу предложить дополнить вашу реализацию движением солнца (по желанию можно добавить движение по окружности):

var sunMove = function(sunId, offset, timeout) {
    $('#' + sunId).css({
        left: '+=' + offset.left,
        top: '+=' + offset.top
    }).get(0).onDrag();
    setTimeout(function() {
        sunMove(sunId, offset, timeout);
    }, timeout);
}

sunMove('sun', {left:1, top:1}, 50);

[@damirazo]

Спасибо! Добавил ваш код в пример. Его можно задействовать, если нажать на ссылку в левом верхнем углу экрана.

[@mggtsnppr]

Клево — при должной сноровке ваше солнце можно превратить в луну! Достаточно резко выдернуть солнце вверх за пределы окна, а потом плавно вернуть в верхнюю часть неба. Еще забавной показалась возможность выставить звездам «opacity» больше единицы — чем «глубже» солнце, тем «ярче» звезды. Представилось, как на большом мониторе выгорают звездные пиксели…

[@PoN]

Всего лишь анимация заката, а CPU грузится как будто в 3D экшен играю. (проверенно FF7,Gchrome15)

[@Tomasina]

до оптимизации браузеры доберутся года через три.

[@dshster]

Спасибо за dom-drag. Недавно нужно было, перерыл пол-интернета, всё что находил было основано на jQuery UI. «Чистый» код без фрейморков сейчас крайне сложно встретить.