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

Question

Привет, я хочу, чтобы элемент проскальзывал из окна браузера - видимая область просмотра моей веб-страницы имеет ширину 900 пикселей и представляет собой блок, плавающий в центре окна браузера.(Таким образом, если окно браузера имеет ширину 1100 пикселей, по обе стороны от моего 900-пиксельного деления есть пустое пространство размером 100 пикселей. С окном браузера шириной 1500 пикселей имеется 300 пикселей пустого пространства по обе стороны и т. Д.)

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

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

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

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

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

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

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