Я уже делилась информацией о том, как сделать самопечатающийся текст в блоге. Тоже интересный вариант. Здесь же мы получаем gif-файл с анимированным вводом текста. После набора, будет сгенерирован код, который вставим в тело поста в режиме HTML или в гаджет HTML/JavaScript.
Ну, давайте уже посмотрим что получится в итоге и приступим к созданию своего первого лайфтайпа - так это называется.
Заходим по ссылке и проходим самую простую регистрацию. Или же активацию через Фейсбук или аккаунт ВК. Попадаете на страницу создания лайфтапа.
В поле набираем нужный текст. Функций не так уж много. К сожалению, текст выдаётся только в чёрном цвете. Ну ниже что-нибудь смудрим. Стиль текста, формат, скорость анимации и ширина картинки - на ваше усмотрение. Нажимаем кнопку оживить. Всё.
Чтобы отобразить эту анимацию в сообщении, выбираем код для сайта или блога и копируем его.
Выглядеть он будет примерно так-
<a href="http://text.livetyping.ru/1650739"><img border="0" src="http://text.livetyping.ru/1711043.gif" alt="Большое спасибо всем за вни"></a><br><small><a href="http://text.livetyping.ru">Text.LiveTyping.ru</a></small>
Немного его подкорректируем (да не обидятся на нас создатели) - убираем ссылку, отмеченную красным. И закроем картинку тегом noindex.
<noindex> <a href="http://text.livetyping.ru/1650739"><img border="0" src="http://text.livetyping.ru/1711043.gif" alt="Большое спасибо всем за вни"></a></noindex>
Чтобы предать немного красоты и привлекательности, можно заключить это всё в рамочку. Просто добавим стили CSS. Варианты таких есть здесь. Или же оформить всё в качестве цитаты. К примеру вот так -
<div style="border-radius: 30px; border: 5px double #0D129D; padding: 8px;">тут код </div>
Результат-
Пофантазируйте где и как можно использовать такой живой текст. Конечно же, он не оставит без внимания ваших посетителей.
И у меня сегодня всё. Спасибо за визит и до новых встреч.
здесь можно оформить подписку на новые шпаргалки
Замечательная шпаргалка! Виктория, rel="nofollow" здесь не надо вставлять?
ОтветитьУдалитьИрина, да по желанию. Ира, если будешь реализовать у себя, дай посмотреть потом.
ОтветитьУдалитьВиктория, я пока сделала в тестовом блоге "БиблиоИрина" http://irinapoleshenko.blogspot.ru/
ОтветитьУдалитьДа, Ирина, просмотрела. Интересно и ничего сложного.
ОтветитьУдалитьТакой текст оживляет..
ОтветитьУдалитьВика, ты мне в Контакте писала сообщение?
Jozzi N , да это я писала тебе.
ОтветитьУдалитьХорошо, я тебе там отвечу.
ОтветитьУдалитьВика доброго времени суток! Я может не по теме, но тоже с анимацией только цифр. Вы спец по спец.эффектам! Можно ли цифры, поместить в рамку и увеличить их шрифт в таком коде: script
ОтветитьУдалитьfunction scroll(val,el,timeout,step){
var i=0;
(function(){
if(i<=val){
setTimeout(arguments.callee,timeout);
document.getElementById(el).innerHTML=i;
i=i+step;
}else{
document.getElementById(el).innerHTML=val;
}
})();
}
scroll(60000,'shethik-cifra',10,100);
/script
НАС УЖЕ: div class="shethik-cifra" id="shethik-cifra">/div (script и div оформлены в <> с ними не редактор не дает опубликовать) Или как-то оформить это красиво? С уважением Тата.
Да, попробуйте так к примеру, от этого и исходите. Это я так понимаю таймер отсчёта. Попробуйте
ОтветитьУдалитьdiv class="shethik-cifra" id="shethik-cifra" style="border: 4px double red; padding: 2px; width: 120px;color: #0000FF;font-size:20px;">
нас уже
/div
Кстати завтра пост опубликую, идейку вы подкинули.
Ой класс!!! Спасибо Вика, я вот так оформила, а закруглить рамочку можно, пробовала border-radius, чет не получилось! И шрифт в тексте "нас уже" увеличить можно?
ОтветитьУдалитьcenterНАС УЖЕ: div class="shethik-cifra" id="shethik-cifra" style="border: 4px double red; padding: 2px; width: 120px;color: #0000FF;font-size:20px;">
/div</center. С уважением Тата!
P.S. Да Вика, это таймер отчета!
ОтветитьУдалитьПри публикации и в режиме просмотра нет Нас уже Там задан класс для shethik-cifra
ОтветитьУдалитьнапишите просто текстом вверху или где вы это публиковать думаете.
style="border-radius: 10px 10px 10px 10px; border: 4px double red; color: blue; font-size: 20px; padding: 2px; width: 100px;
Вика, спасибо за округление рамки! Буду публиковать в сообщении, я попробовала в режиме редактирования текста увеличить, получилось! Жду ваш пост на эту тему, там я думаю еще "красивости" будут предложены!
ОтветитьУдалитьTata, пожалуйста. Да нет, пост не про это, а про первую букву. Кое-что дополнила, чтобы с картинкой.
ОтветитьУдалитьВика, это чтоб пост начинался с картинки(справа), а потом текст с большой красивой буквы? Класс, я никак не могла нигде найти как это сделать!
ОтветитьУдалить