Веб-разработка

индекс
236,88

jQuery sIFR Plugin — создаем flash-текст

jQuery sIFR Plugin является аддоном для jQuery, который позволяет легко заменять текст на веб-странице на flash-текст (sIFR).

image

Как это работает?
Вы вызываете javascript-функцию, которая заменяет текст на веб-странице на sIFR (Scalable Inman Flash Replacement) текст, используя возможности jQuery расширенные jQuery Flash плагином. jQuery находит текст, который Вы хотите заменить. Затем, jQuery sIFR Plugin преобразовывает текст — меняет размер, цвет, шрифт и пр. jQuery sIFR Plugin полностью конфигурируем, и Вы можете настроить отображение текста не хуже чем при помощи CSS.

Наконец, jQuery Flash Plugin делает всю работу по вставке sIFR-текста на Вашу веб-страницу. В результате Вы получаете красивый sIFR-текст, который поддерживают все популярные браузеры.

Использовать его очень просто, вызываем функцию sifr() для текста который мы собираемся преобразовать:
$('#title').sifr();


Также мы можем настроить стили:
$('#someThing').sifr({
font: 'My Awesome Font' // будет загружен шрифт 'My Awesome Font.swf'
});

$('#someThing').sifr({
color: '#f00' // устанавливаем цвет для текста
});

$('#someThing').sifr({
width: 500 // устанавливаем ширину для sIFR element
});


Пример.

С полным списком возможностей можно ознакомится здесь.

Преобразовать любой шрифт (.ttf) в формат *.swf Вы можете при помощи sIRF Generator-a.
+27
29 сентября 2008, 16:27
81

комментарии (40)

–1
EverCelt #
sIFR и jQuery sIFR… инициализация по-разному, проблемы те же:-) даже ваш пример с WEBMASTERS.BY не считаю удачным… например для оптимизации SEO (если WEBMASTERS.BY — заголовок сайта ) или для оптимизации загрузки страницы… ваша картинка с текстом весит 6.1 Kb
имхо вещь полезная, но лучше не злоупотреблять:-) удачи
+3
webmasters_by #
картинку я вставил только для примера, может и не совсем удачно получилось,
но если вы глянете на странице с работающими примерами исходный код, то увидите, что там обычный текст, пользователь видит красивый flash-заголовок, а поисковый робот — текст.

а по поводу того что этим лучше не злоупотреблять, тут я полностью согласен
0
EverCelt #
согласен для сео в принципе норм, но насчет оптимизации загрузки страницы вопрос остается… тем более для того чтобы это штука заработала, необходимо подгрузить скрипты:-) в общем, использовать или нет, вопрос спорный и остается на совести мастера:-)
0
nicothin #
нормально для сео, а то что два дополнительных файла будут грузиться — не так уж страшно, на мой взгляд.
в своих проектах с неастрономической посещаемостью буду использовать.
0
VasilioRuzanni #
Смысл в том, что штука не является заменой обычному HTML-тексту, а является «приятной опцией», не более того. Если отключены скрипты или Флэш — пользователь (как и поисковый робот) увидит просто текст.
0
webmasters_by #
ну в этом и есть главный плюс этой технологии, если у пользователя отключен флэш или javascript, то он увидит не пустое место или серый квадрат с предложением загрузить плагин, а обычный заголовок, который в свою очередь можно, средствами CSS, максимально приблизить к оригиналу, и таким образом дизайн не пострадает.
+2
Sashok #
Сложно найти лучший способ для использования нестандартных шрифтов в заголовках.
0
nayjest #
–1
tmikwid #
Боже, почему такой уродливый пример для такой кайфовой технологии? :)
0
webmasters_by #
хм, вообще то я использовал примеры от автора плагина, чем они вас не устраивают?
–2
liveder #
А есть еще один способ 10 летней давности… видимо, возвращаемся к прошлому.
@font-face {
font-family: «Robson Celtic»;
src: url(«font»)
}
для перекодирования шрифта из ttf в вебовский формат использовать специальную программу от MS — Weft.
www.microsoft.com/typography/web/embedding/weft2/default.htm
Примером — liveblog.spb.ru — надеюсь, заброшенный блог не является рекламой? ;)
ps: открывать в эксплорере.
0
bolk #
+2
Temp1ar #
Да, но «ps: открывать в эксплорере. » — не круто :/
0
nicothin #
весьма разочаровало, что ссылка «пример» ведет не на пример, а на страницу блока автора.
а сам плагин хороший, несомненно буду использовать.
0
ellesar2001 #
Спасибо за плагин, как раз пригодится в скором времени.
Но ссылку на пример сделайте все-таки ссылкой на ПРИМЕР ;)
0
elfiki #
Что-то у вас «пример» ведет не на пример, а туда же, куда и остальные ссылки… поправили бы…
+1
elfiki #
Упс, не заметил, что уже писали
0
webmasters_by #
ссылку на примеры подправил
+1
sintez #
Самое замечательное в sifr, это то, что текст можно копировать, что нельзя сделать с текстом в виде картинок.
–2
ecl #
и самое ужасное — отсутствие русских букв в наборах шрифтов.
0
webmasters_by #
вообще то последний пример на русском языке… вы сами можете выбрать понравившийся вам шрифт, конвертировать его во флэш с помощью sIFR генератора и использовать его с любым языком, который этот шрифт поддерживает
0
fomichev #
Если делать оригинальный sifr и конвертить swf в флеше, прямо там можно выбирать наборы символов.
0
ecl #
посмотрел, вы правы, уже можно :) примерно год назад у меня такой трюк с русским шрифтом, увы, не прошёл. Что ж, это хорошая новость — теперь можно применять не только для оутсорс.
0
spike_msu #
Как дела обстоят с ссылками? Помнится ранее они были либо флэшовыми(что не всегда удобно), либо ссылка-блок накладывалась поверх.

Как реализовано здесь?
0
webmasters_by #
проблем со ссылками здесь нет, я добавил еще один пример, где sIFR применяется к тегу А, разницы нет никакой.
0
spike_msu #
Flsah ссылка не удобна. Многие привыкли открывать через ctrl. А при клике правой кнопкой на ссылке, кроме двух строчек флэш меню нет.

Но все равно, добавил в закладки. Редко, но нужна такая фишка.
0
John_Cherep #
прикольная вещица.

пригодится, например, для создания сайта, где будет возможность наносить надписи на футболки, либо кружки
0
Snick #
«Вы можете настроить отображение текста не хуже чем при помощи CSS» — зачем, если CSS позволяет делать это как минимум не хуже?
0
webmasters_by #
CSS не позволяет использовать нестандартные шрифты
–1
Snick #
Вот еще новости. См. выше
+1
webmasters_by #
где вы там увидели CSS?

лучше обратите внимание на p.s. в этом комментарии
0
zzzzzzz #
А эффекты можно применять к тексту?
0
webmasters_by #
все фичи можно глянуть на странице автора — jquery.thewikies.com/sifr/#features
0
kex #
Если шарите во флеше — можно вписать в as-исходник то что нужно.
0
caIIIa #
Воистину отлично, т. к. раньше прикручивание sifr было большим геморроем
0
sonyblack #
А что насчет Anti-Alias?
+2
kex #
Антиалиасинг как у любой надписи во флеше — есть, причем везде одинаковый.
0
kex #
Автор, а как насчет мерцаний, в момент замены при загрузке страницы? В стандартном sIFR есть дополнительный css для этого.
0
nayjest #
Замечательное решение! Спасибо, буду использовать
0
Zaandr #
помоему очень красивый пример рассматривать шрифты ))) для какого нибудь сайта со шрифтами )

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.