Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 55
А для чего это можно использовать в реальной работе? Или тут just for fun?
Дизайнер нарисовал одностраничный промо-сайт и по задумке там должны были хаотично летать призы, я предложил такой вариант, мне показалось это более user friendly если пользователь может останавливать это безобразие, не двигая мышку и прочитать таки условия акции без отвлекающих факторов. Заказчик остался доволен, у них на сайт все двигается, как они и хотели.
«там должны были хаотично летать призы»
Просто п… ц какой-то, а не промо-сайт. Задумщика — к стенке.
Просто п… ц какой-то, а не промо-сайт. Задумщика — к стенке.
Примерно как задумщика этого: www.oversun.ru?
В чем суть данного плагина?
По-моему суть параллакс эффекта в неравномерной промотке ближнего объекта относительно дальнего, что позволяет сделать иллюзию объема.
А три судорожно елозящих кубика это эпилептик-эффект.
А три судорожно елозящих кубика это эпилептик-эффект.
$(«div»).epileptic(«start», 300); — как-то так, да?
Посмотрите второй пример, может быть так нагляднее?
Эта ссылка просто обязана была появиться в комментариях к этому топику.
Это Обиван или Квайгон?
proteys.info/404/ Эта тоже :)
Я пытался поставить фигуры на место — не вышло :(
У фигур разные коэффициенты — соответственно разные «начальные» точки, так и должно быть
еще есть небольшой баг при появления курсора.
идет резкое передвижение объектов [видео]
идет резкое передвижение объектов [видео]
Да, признаю я не дизайнер и нарисовать красивые картинки для примера мне мучительно сложно, поэтому позаимствовал их для второго примера с приведенного вами сайта, может быть теперь больше похоже на параллакс?
>>простой эффект, суть которого лучше понять на примере
нифига не понял
нифига не понял
Вы меня извините, но это ни фига не паралакс.
Это же «простой parallax эффект» :)
Посмотрите всторой пример, чем же это не параллакс?
Это был сарказм…
Копипаст при написании кода — наверное, быстро, но объём растёт в геометрической прогрессии. Я бы переписал код так:
jsfiddle.net/dHTLt/3/
jsfiddle.net/dHTLt/3/
Спасибо за комментарии и исправления, я ждал этого.
По поводу копипаста, да некрасиво получается, но я хотел вынести все проверки из обработчика, не хочется при каждом движении мыши проверять как нужно двигать объект.
По поводу копипаста, да некрасиво получается, но я хотел вынести все проверки из обработчика, не хочется при каждом движении мыши проверять как нужно двигать объект.
Вычисления делаются быстро, экономить надо не на них в этом случае, а на количестве событий и перерисовок. Не перерисовывать, если положение (почти) не изменилось и если времени прошло меньше 20-30 мс. Тогда, думаю, исчезнут (паралитические) лаги в этом примере. Вы сделали работу оптимизирующего компилятора, но с концептом работать лучше с единым кодом. Например, тут с вычислением перспектив я не работал, с ними творится полный бардак. А отработка 3D-модели поможет сделать из примера не только параллакс, но и вращение, например, если надо. А попробуйте с 8 копиями это сделать.
Лучше уж вот так: jsfiddle.net/dHTLt/34/
Действительно лучше, спасибо.
Да, недавно скрипт всплыл еще раз, и я его еще немного изменил.
Вот моя версия: jsfiddle.net/dHTLt/79/
Отличие — теперь все блоки наблюдаются одним и тем же наблюдателем (существует точка, при перемещении мыши в которую все блоки встают на свои места).
Вот моя версия: jsfiddle.net/dHTLt/79/
Отличие — теперь все блоки наблюдаются одним и тем же наблюдателем (существует точка, при перемещении мыши в которую все блоки встают на свои места).
Ещё, было бы не плохо, добавить animation + easing. Конечно, будет тормознее, но если объектов не много, то не критично. Вот пара аккуратных примеров с аним+иазингом:
www.ascensionlatorre.com/philosophy
fieldnotes.iancoyle.com/ (раздел «Nike Better World»)
mortenstrid.no/ — тут тоже есть anim+easing в отличае от Вашего второго примера.
www.ascensionlatorre.com/philosophy
fieldnotes.iancoyle.com/ (раздел «Nike Better World»)
mortenstrid.no/ — тут тоже есть anim+easing в отличае от Вашего второго примера.
на kino-govno.com/ регулярно использую подобное. очень красиво получается. спасибо вам за скрипт.
Здесь bjork.com
Вы подпишите второй пример. Пока не увидел в комментах думал, что вы сами это сделали.
Зачем нужны invert*, если можно для той же цели использовать отрицательные ratio*?
Давно уже побаловался с этим эффектом вот таким образом: aeroseti.ru/dog/
И здесь www.pepsilikerz.com
Мы на новый год подобным образом открытку делали :-) studio38.ru/new_year/index.html
Чтобы еще корректнее работало, надо после кода:
добавить строчку:
А то при ресайзе окна и при «процентном» позиционировании блока блоки не ресайзатся…
$('html').on('mousemove', function(e) {
x = eqH(e)
y = eqW(e)
$(layer).css({top:y,left:x})
});
добавить строчку:
$(window).resize($.fn.plaxmove(options));
А то при ресайзе окна и при «процентном» позиционировании блока блоки не ресайзатся…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Простой parallax эффект для промо-сайта