С помощью графических программ, как Photoshop, Gimp и других вы можете создавать анимированные картинки в формате GIF. В этой статье хочу показать, как создавать из текста и изображений мигающие элементы , используя CSS3 и Javascript.
Выбор CSS3 - это лучше, чем javascript, потому что не так ощутимо тормозит открытие страницы браузера. Эта настройка может быть интересно для того, чтобы выделить конкретный абзац, или для того, чтобы стимулировать нажатием на какой - то элемент.
Для ясности разделю пост на 4 секции:
мигающий текст с помощью CSS
мигающие изображения с помощью CSS
мигающий текст с помощью Javascript
мигающее изображение с помощью Javascript
Для индивидуальных потребностей можно добавить ещё и ссылки.
1. Пример мигающего изображения со ссылкой ( в конкретном случае моя страница на Фейсбуке) на CSS
Соответственно меняйте текст и адрес страницы https://www.facebook.com/ViktoriyBarad/.
Это стили текста
color: #00f;
font-size:18px;
font-weight:bold;
Время анимации задано в 1 секунду (настраивается по усмотрению)
2. Пример мигающей картинки на CSS
Код
Настройки аналогичные - ваш адрес и картинка в формате png.
Теперь давайте посмотрим, как реализовать те же самые эффекты с помощью javascript.
Меняйте на адрес вашего фида и напишите свой текст.
<span style="color: #00f; font-size: 18px; font-weight:bold; и <span style="color: #f00; font-size: 22px; font-weight:bold;" стили шрифта
2. Мигающая картинка на javascript
Второй код с картинкой можно использовать вместе с первым, потому что использовали другой идентификатор blink2.
Во всех кодах присутствует тег target="_blank" для открытия ссылки в новом окне.
Каждый из кодов устанавливается на странице в режиме HTML. Так же можно вставить и в гаджет в любом месте макета блога.
Сегодня всё, удачи всем и до встречи.

Выбор CSS3 - это лучше, чем javascript, потому что не так ощутимо тормозит открытие страницы браузера. Эта настройка может быть интересно для того, чтобы выделить конкретный абзац, или для того, чтобы стимулировать нажатием на какой - то элемент.
Для ясности разделю пост на 4 секции:
мигающий текст с помощью CSS
мигающие изображения с помощью CSS
мигающий текст с помощью Javascript
мигающее изображение с помощью Javascript
Для индивидуальных потребностей можно добавить ещё и ссылки.
1. Пример мигающего изображения со ссылкой ( в конкретном случае моя страница на Фейсбуке) на CSS
<div class="blink_text" >присоединяйтесь к странице Facebook <span><a href="https://www.facebook.com/ViktoriyBarad/" target="_blank">шпаргалки блогерши</a></span></div>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
color: #00f;
font-size:18px;
font-weight:bold;
}
.blink_text a {color:#f00;}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
color: #00f;
font-size:18px;
font-weight:bold;
}
.blink_text a {color:#f00;}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>
Соответственно меняйте текст и адрес страницы https://www.facebook.com/ViktoriyBarad/.
Это стили текста
color: #00f;
font-size:18px;
font-weight:bold;
Время анимации задано в 1 секунду (настраивается по усмотрению)
2. Пример мигающей картинки на CSS
Я в Twitter
<div class="blink_text" ><a href="https://twitter.com/VikserV" target="_blank"><img src="http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png" /></a></div>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>
Настройки аналогичные - ваш адрес и картинка в формате png.
Теперь давайте посмотрим, как реализовать те же самые эффекты с помощью javascript.
1. Мигающий текст на javascript
<div id="blink" style="text-align: center;"> <a href="http://feeds.feedburner.com/shpargalochkiru" target="_blank"><span style="color: #00f; font-size: 18px; font-weight:bold;">Оформите подписку на</span> <span style="color: #f00; font-size: 22px; font-weight:bold;"> шпаргалки блогерши</span></a> </div>
<script language="JavaScript">
function blink_one() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_two()',700);
}
function blink_two() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_one()',700);
}
blink_one();
</script>
Меняйте на адрес вашего фида и напишите свой текст.
<span style="color: #00f; font-size: 18px; font-weight:bold; и <span style="color: #f00; font-size: 22px; font-weight:bold;" стили шрифта
2. Мигающая картинка на javascript
Моя группа "Блоггер для каждого" ВК
<div id="blink2" style="text-align: center;">
<a href="https://vk.com/public150615645" target="_blank"><img src="https://sun9-8.userapi.com/c840238/v840238441/16f9d/EGtuqtogfw8.jpg" /></a></div> <script language="javascript">
function lampeggiamento(){
if(document.getElementById('blink2').style.visibility=="hidden")
{document.getElementById('blink2').style.visibility= "visible"}
else
{document.getElementById('blink2').style.visibility= "hidden"}
}
setInterval('lampeggiamento()',1000);
</script>
<a href="https://vk.com/public150615645" target="_blank"><img src="https://sun9-8.userapi.com/c840238/v840238441/16f9d/EGtuqtogfw8.jpg" /></a></div> <script language="javascript">
function lampeggiamento(){
if(document.getElementById('blink2').style.visibility=="hidden")
{document.getElementById('blink2').style.visibility= "visible"}
else
{document.getElementById('blink2').style.visibility= "hidden"}
}
setInterval('lampeggiamento()',1000);
</script>
Второй код с картинкой можно использовать вместе с первым, потому что использовали другой идентификатор blink2.
Во всех кодах присутствует тег target="_blank" для открытия ссылки в новом окне.
Каждый из кодов устанавливается на странице в режиме HTML. Так же можно вставить и в гаджет в любом месте макета блога.
Сегодня всё, удачи всем и до встречи.
оформите подписку на новые шпаргалки
Здравствуй, Виктория! Интересная фишка! Сразу бросится в глаза в блоге!
ОтветитьУдалитьИрина, привет. Любой элемент на странице или в гаджете можно так оформить.
УдалитьВиктория, что такое CSS? Куда и как копировать гаджеты. И только выделенное цветным, или весь опубликованный фрагмент. Интересно же, чёрт возьми!
ОтветитьУдалитьСемён, CSS это простыми словами Язык для формирования внешнего вида, чаще всего страницы. Как - то так. Предложенные коды, копируются полностью и устанавливаются в гаджет HTML/JavaScript. Он находится по этому пути - админпанель блога - вкладка дизайн - справа в колонке окошко - добавить гаджет. Из предложенного списка выбираете HTML/JavaScript и вставляете в него код скопированный.
УдалитьСпасибо, Вика! В ближайшее время попробую.
ОтветитьУдалитьИнтересная мулька! Спасибо!
ОтветитьУдалитьПопробовать можно. Главное не картинка гифка, которая тяжёлая.
ОтветитьУдалитьТоже забрала,мне как раз для ВК,спасибки
ОтветитьУдалитьЯ только не пойму, а как это всё можно в ВК реализовать?
Удалитьв ВК наши чаты для инвесторов,так называемые "Беседки", в данном случае кнопочка ведёт на мой чат-беседку,где мы обсуждаем инвестиционные проекты,где платят,где скам,где лохотрон и так далее
ОтветитьУдалитьА вон оно что. Это для кнопочки в блоге. Поняла. Я думала , как ты на паблике в ВК это применить хочешь.
Удалитьнет,конечно,ВК и Одноклассники зачастую блокируют,чсё,что приносит доход,и уж о применении там чего-либо и речи не может быть,вот так хитрим как можем,в беседках.
ОтветитьУдалить