текст и мигающие изображение с помощью CSS или javascript

С помощью графических программ, как Photoshop,  Gimp и других вы можете создавать анимированные картинки в формате GIF. В этой статье хочу показать, как создавать из текста и изображений мигающие элементы , используя CSS3 и Javascript.

текст и картинка


Выбор 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>


Соответственно меняйте текст и адрес страницы 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>


Настройки аналогичные - ваш адрес и картинка в формате 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>


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

Во всех кодах присутствует тег target="_blank" для открытия ссылки в новом окне.
Каждый из кодов устанавливается на странице в режиме HTML. Так же можно вставить и в гаджет в любом месте макета блога.

Сегодня всё, удачи всем и до встречи.


оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

5 комментариев:

  1. Здравствуй, Виктория! Интересная фишка! Сразу бросится в глаза в блоге!

    ОтветитьУдалить
    Ответы
    1. Ирина, привет. Любой элемент на странице или в гаджете можно так оформить.

      Удалить
  2. Виктория, что такое CSS? Куда и как копировать гаджеты. И только выделенное цветным, или весь опубликованный фрагмент. Интересно же, чёрт возьми!

    ОтветитьУдалить
    Ответы
    1. Семён, CSS это простыми словами Язык для формирования внешнего вида, чаще всего страницы. Как - то так. Предложенные коды, копируются полностью и устанавливаются в гаджет HTML/JavaScript. Он находится по этому пути - админпанель блога - вкладка дизайн - справа в колонке окошко - добавить гаджет. Из предложенного списка выбираете HTML/JavaScript и вставляете в него код скопированный.

      Удалить
  3. Спасибо, Вика! В ближайшее время попробую.

    ОтветитьУдалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск