Pull to refresh

Comments 55

А для чего это можно использовать в реальной работе? Или тут just for fun?
Дизайнер нарисовал одностраничный промо-сайт и по задумке там должны были хаотично летать призы, я предложил такой вариант, мне показалось это более user friendly если пользователь может останавливать это безобразие, не двигая мышку и прочитать таки условия акции без отвлекающих факторов. Заказчик остался доволен, у них на сайт все двигается, как они и хотели.
«там должны были хаотично летать призы»
Просто п… ц какой-то, а не промо-сайт. Задумщика — к стенке.
По-моему суть параллакс эффекта в неравномерной промотке ближнего объекта относительно дальнего, что позволяет сделать иллюзию объема.

А три судорожно елозящих кубика это эпилептик-эффект.
$(«div»).epileptic(«start», 300); — как-то так, да?
Посмотрите второй пример, может быть так нагляднее?
Вот так уже намного лучше, особенно хорошо смотрится на реальном сайте :)
Это Обиван или Квайгон?
Обиван думаю. Он долго находился в этих локациях.
Ну а кто говорил “these are not the droids you are looking for”?
Генерал Оби-Ван Кеноби.
Либо Октокэт, либо авторский кот Борис таки прочел код.
Песня зачётная :)
Я пытался поставить фигуры на место — не вышло :(
У фигур разные коэффициенты — соответственно разные «начальные» точки, так и должно быть
еще есть небольшой баг при появления курсора.
идет резкое передвижение объектов [видео]
Даже видео записали) спасибо, исправим.
А если сайт без скрола, а параллакс хочется?
UFO landed and left these words here
Да, признаю я не дизайнер и нарисовать красивые картинки для примера мне мучительно сложно, поэтому позаимствовал их для второго примера с приведенного вами сайта, может быть теперь больше похоже на параллакс?
>>простой эффект, суть которого лучше понять на примере

нифига не понял
Добавил еще один пример.
Вы меня извините, но это ни фига не паралакс.
Это же «простой parallax эффект» :)
Копипаст при написании кода — наверное, быстро, но объём растёт в геометрической прогрессии. Я бы переписал код так:
jsfiddle.net/dHTLt/3/
Спасибо за комментарии и исправления, я ждал этого.
По поводу копипаста, да некрасиво получается, но я хотел вынести все проверки из обработчика, не хочется при каждом движении мыши проверять как нужно двигать объект.
Вычисления делаются быстро, экономить надо не на них в этом случае, а на количестве событий и перерисовок. Не перерисовывать, если положение (почти) не изменилось и если времени прошло меньше 20-30 мс. Тогда, думаю, исчезнут (паралитические) лаги в этом примере. Вы сделали работу оптимизирующего компилятора, но с концептом работать лучше с единым кодом. Например, тут с вычислением перспектив я не работал, с ними творится полный бардак. А отработка 3D-модели поможет сделать из примера не только параллакс, но и вращение, например, если надо. А попробуйте с 8 копиями это сделать.
Действительно лучше, спасибо.
Да, недавно скрипт всплыл еще раз, и я его еще немного изменил.
Вот моя версия: jsfiddle.net/dHTLt/79/

Отличие — теперь все блоки наблюдаются одним и тем же наблюдателем (существует точка, при перемещении мыши в которую все блоки встают на свои места).
Ещё, было бы не плохо, добавить animation + easing. Конечно, будет тормознее, но если объектов не много, то не критично. Вот пара аккуратных примеров с аним+иазингом:
www.ascensionlatorre.com/philosophy
fieldnotes.iancoyle.com/ (раздел «Nike Better World»)
mortenstrid.no/ — тут тоже есть anim+easing в отличае от Вашего второго примера.
В планах в следующей версии реализовать animation, transition и easing.
на kino-govno.com/ регулярно использую подобное. очень красиво получается. спасибо вам за скрипт.
Вы подпишите второй пример. Пока не увидел в комментах думал, что вы сами это сделали.
Зачем нужны invert*, если можно для той же цели использовать отрицательные ratio*?
Поддерживаю предыдущий комментарий.
На производительности это конечно не скажется, но пару десятков строк кода точно сэкономит.
Как-то я проглядел этот момент, будет время перепишу.
Чтобы еще корректнее работало, надо после кода:
$('html').on('mousemove', function(e) {
	x = eqH(e)
	y = eqW(e)
	$(layer).css({top:y,left:x})
});

добавить строчку:
$(window).resize($.fn.plaxmove(options));

А то при ресайзе окна и при «процентном» позиционировании блока блоки не ресайзатся…
Only those users with full accounts are able to leave comments. Log in, please.