How to become an author
Search
Write a publication
Pull to refresh

Comments 55

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

А три судорожно елозящих кубика это эпилептик-эффект.
Total votes 39: ↑37 and ↓2+35
$(«div»).epileptic(«start», 300); — как-то так, да?
Total votes 6: ↑3 and ↓30
Посмотрите второй пример, может быть так нагляднее?
Total votes 11: ↑11 and ↓0+11
Вот так уже намного лучше, особенно хорошо смотрится на реальном сайте :)
This comment wasn’t rated yet0
Это Обиван или Квайгон?
This comment wasn’t rated yet0
Обиван думаю. Он долго находился в этих локациях.
Total votes 2: ↑2 and ↓0+2
Ну а кто говорил “these are not the droids you are looking for”?
Total votes 5: ↑5 and ↓0+5
Генерал Оби-Ван Кеноби.
This comment wasn’t rated yet0
Либо Октокэт, либо авторский кот Борис таки прочел код.
Total votes 3: ↑3 and ↓0+3
Я пытался поставить фигуры на место — не вышло :(
Total votes 15: ↑15 and ↓0+15
У фигур разные коэффициенты — соответственно разные «начальные» точки, так и должно быть
This comment wasn’t rated yet0
еще есть небольшой баг при появления курсора.
идет резкое передвижение объектов [видео]
Total votes 1: ↑1 and ↓0+1
Даже видео записали) спасибо, исправим.
This comment wasn’t rated yet0
А если сайт без скрола, а параллакс хочется?
Total votes 3: ↑2 and ↓1+1
UFO just landed and posted this here
Да, признаю я не дизайнер и нарисовать красивые картинки для примера мне мучительно сложно, поэтому позаимствовал их для второго примера с приведенного вами сайта, может быть теперь больше похоже на параллакс?
Total votes 3: ↑3 and ↓0+3
>>простой эффект, суть которого лучше понять на примере

нифига не понял
Total votes 2: ↑2 and ↓0+2
Добавил еще один пример.
This comment wasn’t rated yet0
Вы меня извините, но это ни фига не паралакс.
Total votes 4: ↑3 and ↓1+2
Это же «простой parallax эффект» :)
This comment wasn’t rated yet0
Копипаст при написании кода — наверное, быстро, но объём растёт в геометрической прогрессии. Я бы переписал код так:
jsfiddle.net/dHTLt/3/
Total votes 3: ↑3 and ↓0+3
Спасибо за комментарии и исправления, я ждал этого.
По поводу копипаста, да некрасиво получается, но я хотел вынести все проверки из обработчика, не хочется при каждом движении мыши проверять как нужно двигать объект.
Total votes 1: ↑1 and ↓0+1
Вычисления делаются быстро, экономить надо не на них в этом случае, а на количестве событий и перерисовок. Не перерисовывать, если положение (почти) не изменилось и если времени прошло меньше 20-30 мс. Тогда, думаю, исчезнут (паралитические) лаги в этом примере. Вы сделали работу оптимизирующего компилятора, но с концептом работать лучше с единым кодом. Например, тут с вычислением перспектив я не работал, с ними творится полный бардак. А отработка 3D-модели поможет сделать из примера не только параллакс, но и вращение, например, если надо. А попробуйте с 8 копиями это сделать.
Total votes 1: ↑1 and ↓0+1
Действительно лучше, спасибо.
This comment wasn’t rated yet0
Да, недавно скрипт всплыл еще раз, и я его еще немного изменил.
Вот моя версия: jsfiddle.net/dHTLt/79/

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

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

А то при ресайзе окна и при «процентном» позиционировании блока блоки не ресайзатся…
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time
Unlock dark mode

Your account

Sections

Information

Services

Support
© 2006–2024, Habr