Сделать элементы анимированными из внешнего браузера с помощью jquery?

Question

Howdy, я хочу, чтобы элемент скользил в поле зрения извне окна браузера - видимый div моей веб-страницы имеет ширину 900 пикселей и представляет собой поле, которое плавает в центре окна браузера. (Итак, если окно браузера имеет 1100px в поперечнике, есть 100px свободного места по обе стороны от моего деления на 900px. В окне браузера размером 1500px есть 300px свободного пространства с обеих сторон и т. Д.)

Что я хотите, чтобы элемент скользил со стороны, чтобы войти в окно браузера, затем перемещается по пустому пространству между внутренним краем окна браузера и внешним краем моего окна 900 пикселей, а затем вводит поле (чтобы было ясно, все в одном непрерывном движении).

Это легко сделать, если у меня есть только один размер окна браузера. У меня только один элемент анимации слева - = 500 пикселей или около того, но если зритель моего веб-сайта использует больший экран, элемент будет начинаться внутри пустого пространства вместо внешнего окна браузера.

Конечно, я мог бы сделать что-то вроде анимации слева - = 1000px, но тогда это означало бы, что люди с меньшим экраном просто ждут появления элемента, когда он пересекает несуществующее пространство не- - существующей области окна браузера.

Итак, мой вопрос: Есть ли что-то, что я могу сказать jquery (или подключаемый модуль), чтобы установить начальную точку движущегося элемента непосредственно за пределы видимого края окна браузера, независимо от браузера размер окна? Спасибо!

Answer 1

Я должен был содержать всю анимацию внутри div, которая была шире, чем 1920px - максимальный размер экрана моего типичного посетителя - так что независимо от того, какие анимационные элементы появятся, скользя по внутреннему краю окна браузера на любом мониторе с разрешением экрана 1920 пикселей или меньше. С моим предыдущим ответом, элементы появились внутри div 900px. Теперь я создал div шириной 1930px. И я добавил переполнение: скрытый в стиле кузова, чтобы исключить горизонтальную полосу прокрутки. Будет ли проверить в эти выходные на 1920px мониторе ...

Вот моя последняя тестовая страница с эти изменения реализованы: http://ianmartinphotography.com/test-site/index.html

Answer 2

Предполагая, что вы знаете ширину узла fly-in, установите его в положение абсолютного и сделайте левый отрицательным от ширины узла. Затем вам нужно рассчитать, как далеко вы хотите оживить узел. Определите текущую ширину браузера, разделите его на два, затем вычтите ширину мухи в узле, разделенную на два. Это будет левая позиция, в которой вы хотите, чтобы узел закончил. Таким образом, общее расстояние, которое он должен перемещать, будет текущей левой позицией мухи в узле, добавленной в конечную позицию. Огоньте свою анимацию от этого числа. Вот пример: http://jsfiddle.net/brianflanagan/KtUEL/

Answer 3

Мне кажется, что вы действительно хотите знать ширину страницы. Посмотрите на эту страницу, она покажет вам, что браузеры поддерживают какие-то свойства ширины страницы:

http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

Answer 4

Итак, что я ликвидируется делать это просто создание анимации достаточно широк для самых больших мониторов, которые посещают мой сайт - 1920 пикселей в соответствии с Google Analytics.

В CSS родительского div, #container, я добавил переполнение: скрытый, чтобы препятствовать появлению полосы прокрутки в анимации.

Одна вещь, которая пришла мне в голову (вероятно, очевидна для других), заключается в том, что продолжительность анимации определяет скорость, с которой анимированный элемент перемещается по экрану - так что движущийся элемент займет 1100 мс, чтобы пересечь 10 000 пикселей или 1000px. Значит, чем больше расстояние, которое должен пройти элемент, тем быстрее он должен двигаться. Может быть, есть способ сказать: «Проехать 60 миль в час через эту область». Вместо этого мы говорим: «Пересеките эту область за такое количество времени и проедете так же быстро, как вы должны прибыть вовремя».

У меня будет установлен файл cookie, так что эта анимация будет воспроизводиться только один раз за сеанс. Чтобы снова запустить его, необходимо «очистить» cookie «приветствовать», или браузер должен будет снова выйти и запустить. На этой тестовой странице cookie деактивируется.http://ianmartinphotography.com/test-site/index-left-right-10.html