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

Автор оригинала: Jonathan Neal
  • Перевод
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.
Поделиться публикацией

Похожие публикации

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 40

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

      а по поводу того что этим лучше не злоупотреблять, тут я полностью согласен
        0
        согласен для сео в принципе норм, но насчет оптимизации загрузки страницы вопрос остается… тем более для того чтобы это штука заработала, необходимо подгрузить скрипты:-) в общем, использовать или нет, вопрос спорный и остается на совести мастера:-)
          0
          нормально для сео, а то что два дополнительных файла будут грузиться — не так уж страшно, на мой взгляд.
          в своих проектах с неастрономической посещаемостью буду использовать.
            0
            Смысл в том, что штука не является заменой обычному HTML-тексту, а является «приятной опцией», не более того. Если отключены скрипты или Флэш — пользователь (как и поисковый робот) увидит просто текст.
              0
              ну в этом и есть главный плюс этой технологии, если у пользователя отключен флэш или javascript, то он увидит не пустое место или серый квадрат с предложением загрузить плагин, а обычный заголовок, который в свою очередь можно, средствами CSS, максимально приблизить к оригиналу, и таким образом дизайн не пострадает.
        +2
        Сложно найти лучший способ для использования нестандартных шрифтов в заголовках.
        –1
        Боже, почему такой уродливый пример для такой кайфовой технологии? :)
          0
          хм, вообще то я использовал примеры от автора плагина, чем они вас не устраивают?
          –2
          А есть еще один способ 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
              +2
              Да, но «ps: открывать в эксплорере. » — не круто :/
              0
              весьма разочаровало, что ссылка «пример» ведет не на пример, а на страницу блока автора.
              а сам плагин хороший, несомненно буду использовать.
                0
                Спасибо за плагин, как раз пригодится в скором времени.
                Но ссылку на пример сделайте все-таки ссылкой на ПРИМЕР ;)
                  0
                  Что-то у вас «пример» ведет не на пример, а туда же, куда и остальные ссылки… поправили бы…
                  +1
                  Самое замечательное в sifr, это то, что текст можно копировать, что нельзя сделать с текстом в виде картинок.
                    –2
                    и самое ужасное — отсутствие русских букв в наборах шрифтов.
                      0
                      вообще то последний пример на русском языке… вы сами можете выбрать понравившийся вам шрифт, конвертировать его во флэш с помощью sIFR генератора и использовать его с любым языком, который этот шрифт поддерживает
                        0
                        Если делать оригинальный sifr и конвертить swf в флеше, прямо там можно выбирать наборы символов.
                          0
                          посмотрел, вы правы, уже можно :) примерно год назад у меня такой трюк с русским шрифтом, увы, не прошёл. Что ж, это хорошая новость — теперь можно применять не только для оутсорс.
                      0
                      Как дела обстоят с ссылками? Помнится ранее они были либо флэшовыми(что не всегда удобно), либо ссылка-блок накладывалась поверх.

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

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

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

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

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

                                        Самое читаемое