Рубрика «javascript» - 587

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

За основу этого движка я взял файлы javascript описанные в этом посте

У нас есть 2 картинки
Первая это первый кадр из второй картинки

|1кадр|

Вторая картинка с множеством кадров

|1кадр|2кадр|3кадр|4кадр|5кадр|...|

Для простоты представим что во второй картинке кадры из фильма через определенные промежутки времени.

При загрузке сайта, пользователь должен видеть только первую картинку.
Это обеспечит быструю загрузку сайта.
При наведении мыши на первую картинку, пользователю будет показана анимация загрузки и начнется загрузка второй картинки с кадрами.
Как только вторая картинка загрузится. начнется ее анимация, и будет продолжаться до тех пор, пока пользователь не уберет указатель мыши с картинки.
Читать полностью »

В прошлом посте я обосновал то как можно с помощью javascript проигрывать покадровую анимацию.

На основе предыдущей статьи я написал скринсейвер по играм.

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

Вот несколько скриншотов скринсейвера:

image
Читать полностью »

На идею создания небольшого движка покадровой анимации меня подтолкнул гугл.

image

Виды покадровых картинок, которые javascript движок превращает в анимацию:

1.

|1кадр|2кадр|3кадр|4кадр|5кадр|...|

2.

|1кадр|
|2кадр|
|3кадр|
|4кадр|
|5кадр|
|...|

3.

|1кадр|2кадр|3кадр|
|4кадр|5кадр|6кадр|
|7кадр|8кадр|9кадр|
…

В итоге я написал два движка которые позволяют создавать анимацию из спрайтов.
cartoon_background.js
cartoon_image.js
Читать полностью »

Очень часто требуется динамически подключить внешний скрипт и запустить из него какую нибудь функцию.
Но вот отследить загрузку самого скрипта не всегда просто.
Я обычно избавляюсь от проблем с подключением так:

Вначале подключаю библиотеку

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

А вот собственно и сам код:

<script type="text/javascript">
$$i({
	attribute: {//устанавливаю атрибуты
		'type':'text/javascript',
		'src':'http://nagon.net/js/NRMSLib.js'
	},
	onready:function() {//действие по окончании подключения скрипта
		modules.sound.start();//запускаю метод из подключенного скрипта
	}
});
</script>

Иногда требуется динамически подключить не скрипт, а стиль CSS
Читать полностью »

AJAX это самая популярная web технология.
К сожалению javascript метод XMLHTTPRequest не позволяет отправлять на сервер файлы.
Конечно можно придумать изощренный способ, но он будет работать не во всех браузерах, да и будет слишком громоздким.
Я посмотрел множество возможных вариантов скрытой отправки формы с помощью различных библиотек, а так же на чистом javascript, в итоге мое внимание привлекла простенькая библиотека scriptjava library написанная на яваскрипте (ее описание я увидел на википедии).

В этой статье я хочу показать как можно отправлять любую форму на сервер через AJAX, в том числе и форму с файлами.
Читать полностью »

Отчет с конференции Front Trends 2012

Конференция проходила 26-27 апреля в Варшаве, это была вторая конференция (Lea Verou о первой конференции) из серии, и судя по слухам и успешности — не последняя.

Все доклады были на английском языке, строго по 30 минут, в одном зале, с частыми, но короткими кофи-брейками. В основном были технологические доклады, но не обошлось без евангелистов и спонсорских докладов. Организация мероприятия очень понравилась, за исключением отсутствия розеток в зале и большой очереди за бейджами в первый день.

Сайт конференции, оф. хэштег #FrontTrends, так же организаторы обещали вскоре выложить видео записи презентаций (как появится информация, обязательно обновлю пост).
Читать полностью »

© Егор Летов.
Читая исходники тестов ECMA-262, случайно наткнулся на этоЧитать полностью »

Вебдванольная загрузка фотографий без flash и html5

Данный топик предназначен для веб-разработчиков начального и среднего уровня. Однако есть интересные моменты, которые могут заинтересовать и продвинутых девелоперов. Если вам интересно создание простого, но красивого загрузчика — добро пожаловать под хабракат.
Читать полностью »

Приглашаем веб-разработчиков, особенно с опытом создания/использования userscripts, стать бета-тестерами проекта tai.st — нового способа улучшения сайтов силами пользователей.

Taist: прокачай свои интернеты

Читать полностью »

Лица.тостер {javascript}: Джо МакКеннДжо, буквально — один из самых больших гостей, которые 25 мая съедутся в Digital October для того чтобы поделиться опытом с участниками конференции .тостер {javascript}. Джо не влазит в стандартное самолетное кресло, о чем он нам с радостью сообщил после нашего приглашения выступить в Москве.

Этот человек уже очень давно работает на мобильном рынке, сейчас занимаясь архитектурой всего портативного направления компании Bazaarvoice — крупного SaaS-агреггатора брендов и их клиентов. Джо занимается исследованием будущего (без шуток) — это называется «device-agnostic», словосочетание с трудом адекватно переводящееся на русский язык, описывает на самом деле очень интересные явления, свидетелями которых мы станем в самое ближайшее время.

Вместо тщетных попыток объяснить то, в чем я не являюсь специалистом, лучше сконцентрируемся на персоне Джо, благо, его история очень интересная и поэтому мы решили рассказать ее отдельно, не перемешивая впечатления.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js