Что это за эффект

Question

На на этой странице , справа, где написано 3%, вы заметите, что каждые 20 или около того секунд самолет летит в этом разделе. Это делается с помощью JavaScript, или это часть анимированного изображения, и как это делается? Я не смог найти пример кода.

P.S. Пожалуйста, пометите, если это не javascript

Answer 1

Можно легко сделать и с CSS / JS.

Просто создайте элемент с background-image, назначьте overflow hidden.Добавьте еще один элемент (самолет) внутри этого элемента, animate его движение, опустите opacity и вуаля :

http://jsfiddle.net/niklasvh/DXQ5a/

Answer 2

Как выяснить, что на странице:

1. Установите Chrome или Firefox с Firebug (или Safari, но я не пользователь Safari, поэтому не могу предоставить инструкции)
2. Загрузить страницу
3. Используйте вкладку разработчика "Elements" в Chrome или вкладку "HTML" в Firebug, чтобы выбрать рассматриваемый элемент.
4. Изучите DOM, где браузер сообщает вам, что это за элемент.

В этом случае вы увидите тег <div> (что говорит о значении "id" flashcontent_home "), а внутри этого тега <div> будет тег <embed>. Верный признак вспышки.

В IE 8 и 9 есть инструменты для разработчиков, которые тоже могут это делать, хотя они немного громоздки. Дело в том, что даже простой старомодный «Просмотр источника» - это то место, с которого нужно начинать.

Answer 3

Sameold, это флэш-анимация, расположенная над изображением.Вот фрагмент кода:

<embed width="618" height="315" wmode="transparent" menu="false" scale="scale" quality="high" bgcolor="#ffffff" name="header_home" id="header_home" style="" src="/img/swf/header_home.swf" type="application/x-shockwave-flash">

А вот прямая ссылка на анимацию: http://armavia.am/img/swf/header_home.swf

Хотя, я думаю, вы могли бы сделать то же самое, используя JavaScript / CSS (вероятно, даже элемент canvas не понадобится).

Answer 4

Это будет вспышка

_{Я думаю}

Я осмотрел дом, используя firebug, и обнаружил, что элемент для вставки абсолютно расположен над jpg. Я бы рискнул предположить, что они только что встроили в изображение простую циклическую флеш-анимацию, чтобы изображение могло измениться, пока анимация не изменилась (или наоборот).

Я не проверял это очень долго, так что это все еще мог быть javascript, при условии, что я пропустил элемент во время перехода.

Answer 5

Это прозрачная вспышка, наложенная на фоновое изображение.Вы можете увидеть флэш здесь: http://armavia.am/img/swf/header_home.swf Вы можете сохранить файл .swf и использовать его на своем собственном сайте, как они это делали (хотя это было бы нарушением авторских прав.)