Wordpress и плагины        18 июня 2015        240         43

Как сделать необычный анимированный текст на WordPress, чтобы у всех раскрылся рот от удивления

Анимация текста на WordPressПриветствую всех присутствующих на этом блоге.

В последнее время меня тянет сделать нечто неординарное и уникальное в оформлении моих статей. Даже не пойму, чего  вдруг меня так это заинтересовало smile

Началось всё из-за красивой заглавной буквы, которую я увидел на одном блоге, а дальше пошло поехало…

Большую часть интересных фишек, можно сделать благодаря редактированию стилей CSS, или внедрения специальных скриптов, но я не разбираюсь ни в том ни в этом. Несмотря на качественные видео уроки и статьи на эту тему, я всё же не решался влезать в файлы CSS, а тем более в базу данных для подключения скрипта.

Плагин Easy Textillate, или лёгкая анимация в тексте

Как же мне повезло, что я уже давно подписан на обновление отличного блога Александра Самсонова — wordpressplugins.ru

Пару дней назад Александр опубликовал новую статью и в ней рассказал о новом плагине Easy Textillate, который он сам же и написал совсем недавно.

Благодаря этому плагину, можно очень просто, я повторяю, очень просто сделать лёгкую анимацию любого текста в ваших статьях.

Подобный анимированный текст будет выглядеть настолько эффектно и оригинально, что у вас не будет сбоя от восторженных отзывов читателей smile

Я конечно же не собираюсь делать обзор этому плагину и показывать вам все его настройки. Перейдите по этой ссылке на статью Александра и там всё очень подробно изложено.

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

Для примера, я сделаю анимацию предложения «С уважением, Игорь Черноморец«. Этот текст присутствует в конце каждой моей статьи. Так вот он может выглядеть так:

Первый вариант:

С уважением, Игорь Черноморец

Второй вариант:

С уважением, Игорь Черноморец

Третий вариант:

С уважением, Игорь Черноморец

Четвёртый вариант:

С уважением, Игорь Черноморец
 

Ну как, прикольно?

Обратите внимание на то, что в каждом варианте, текст разного цвета. Для того, чтобы поменять цвет, нужно использовать стили span. То есть, вы не сможете изменить цвет обыкновенным способом в редакторе.  Вот такой код нужно использовать:

<span style=»color:red;»>шорткод плагина</span>

Как вы понимаете, red — это красный. Можете менять на другой, например: green — зелёный, yellow — жёлтый и т.д.

На самом деле, возможных эффектов в настройках плагина существует неимоверное количество и на любой вкус. Так что каждый найдёт для себя оптимальный вариант.

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

А я прощаюсь с вами и до новых встреч, Пока-пока.

С уважением, Игорь Черноморец

 

Обсуждение: 43 комментария
  1. Андрей Косолапов:

    Привет! Ты часом ничего не сломал?08 А то я уже переживать начал, уж больно резво статьи начали выходить. Нет это хорошо, главное не болей. А плагин прикольный, посмотрю ка нибудь.

    1. Я ждал, пока ты это скажешь. Через полчаса расскажу, почему я так часто начал писать статьи. Подожди немного, хорошо?

  2. Игорь, привет! У меня уже открылся рот от удивления! smile от количества и полезности твоих статей!!! А говорил еще редко пишу….. Или ты решил за «десяточку» постараться? smile Кстати, поздравляю!!! Читал, но не успел чиркануть комент… Молодец! Продолжай радовать!

    1. О, КАКИЕ ЛЮДИ!!!Ты вернулся! 03Спасибо за оценку статей и поздравления с получением тиц 10

      По поводу того, что я часто пишу…это явление временное, а жаль. В комментариях к этой статье я напишу отдельный коммент и объясню, как так получается и почему это временно.

      Спасибо тебе ещё раз Костя

      1. Ну конечно вернулся… smile Я же не останусь жить в Тайланде smile , хотя, в зимнее время очень даже неплохо там будет пожить, но для этого нужны дистанционные источники дохода, которых пока у меня нет. Игорь, про то, почему часто пишешь уже прочитал smile Пусть почаще у тебя будут такие периоды. Молодец! Твой блог с каждым днем становится все интересней! 

        1. Костя, спасибо за пожелания!
          Везет тебе! Тайланд это круто. Всегда мечтал туда поехать, но…билет зараза дорогой, вот и жлоблюсь 04

  3. Игорь, привет! Буковки только черного цвета получаются? вот бы красненькие какие-нибудь.

    1. Привет Галя! Когда я меняю цвет текста через редактор, то это никак не влияет на него и он остаётся таким же чёрным 01 

      Только что спросил у создателя плагина этот вопрос в комментариях. Посмотрим что он ответит. Когда будет ответ, я обязательно уведомлю тебя, хорошо?

    2. Галочка, отвечаю на твой вопрос…
      Вот ответ Александа, как можно поменять цвет текста. Кстати, возможно я добавлю это в статье, но позже.

       
      используйте span с указанием цвета текста, примерно так:

      <span style="color:red;">шорткод плагина</span>

      а через сам плагин цвет задавать плохая идея — тут же люди захотят менять фон, размер шрифта, сам шрифт и тд и тп. а это все должно делаться отдельно от плагина, а не в нем самом.

       

      1. Игорь, спасибо и тебе и Александру!

        1. Пожалуйста Галя. Всегда рад помочь.

  4. Хороший плагин. Я на днях планирую его поставить у себя на блоге. С его помощью текст смотрится красиво и очень хорошо привлекает к себе внимание посетителей.

    1. Привет Сергей!

      Попробуй поиграться с плагином. Там возможных эффектов куча. И ты прав, такой текст сразу привлекает внимание посетителей. Вот только я до сих пор не проверил, насколько он грузит блог. Но мне мало верится, что так критично

  5. Ребята, этот комментарий относится для тех, кому интересно знать, почему вдруг я начал писать и публиковать новые статьи каждый день. На самом деле, это всего лишь временное явление 01

    Если вы до сих пор не знали, то я работаю по профессии техником электронщиком. И являюсь обслуживающим техником автоматических систем пожарной безопасности.

    Моя работа заключается в том, что я каждый день приезжаю к другому клиенту и проверяю (если надо, то чиню) автоматическую систему пожарной безопасности, которая у него находится. То есть, я не сижу в офисе совсем, целый день в дорогах на пути к клиентам. Есть маленькие клиенты (магазинчики, лавки, дома) а есть очень большие клиенты (многоэтажные офисные здания, гостиницы, военные базы, министерство безопасности, филиалы крупных банков и т.д.)

    Если по плану есть проверка у крупных клиентов, то такая проверка может занимать от недели до месяца. То есть я могу целый месяц находится у одного клиента и работать. У меня есть возможность распределить работу так, чтобы её закончить как раз по плану, но…я могу распределить работу иначе. Например, первые две недели порвать жопу и работать допоздна, а остальные две недели ни хрена не делать и тянуть кота за яйца (извиняюсь за грубость) Именно это я и сделал, ради того, чтобы была возможность часто писать статьи. Ведь все мои статьи я пишу только на работе (я это уже говорил) 

    Редко, когда я могу делать подобные штучки (работать тяжело, а потом ничего не делать) но в данном случае у меня была такая возможность.

    Так что, до конца проверки у этого клиента осталось только 6 дней. Ах как жаль. А мне так нравится писать, а не проверять эти чёртовы датчики и газовые баллоны 30

    Сейчас вы знаете как я это сделал! 

    Извините меня заранее, если загрузил личной информацией 07

    1. Андрей Косолапов:

      Игорь, это как в анекдоте:

      Если пьянка мешает работе, то зачем тогда нужна работа07

      1. Нравятся мне твои анегдоты Андрей 03 Жаль, что в реальности невозможно так поступить.

        1. Андрей Косолапов:

          В реале все зависит от полноты налитого стакана. По крайней мере у нас1216

          1. Хах….
            Так может быть из-за этого у вас тяжело живется?07

            1. Андрей Косолапов:

              Тем кто пьет, легко. Остальным тяжко07

    2. Ах, вот как! 07  Здорово, совмещая приятное с полезным…
      И всё же откуда мотивация писать новые статьи, а например, просто так бесцельно ходить по блогам в гости, сидеть в сетях  или в компе что-то ковырять. Хотя, ведь ты уже говорил, что вернулся в блогинг и мы это заметили…
      03

      1. Людмила, когда ты написала «здорово совмещать приятное с полезным», ты имела ввиду блог? Если да, то конечно здорово!!! Мне это очень нравится!18 Никогда в жизни не был настолько увлечён чем-то также, как блогингом 07 я им заболел 16 
        Выходя из этого, можно сделать вывод на твой этот вопрос:

        И всё же откуда мотивация писать новые статьи, а например, просто так бесцельно ходить по блогам в гости, сидеть в сетях или в компе что-то ковырять

  6. Азик:

    Игорь, хей, я в шоке! В культурном шоке, уже который день приходит на почту уведомление о новой статье!
    Думаю, что это с Игорем? Не дай Бог, опять ногу повредил) Привет)
    Теперь все ясно!!)) Анимированный текст — штука клевая и даже прикольная, но я решил больше не нагружать сайт ничем и никак!) Наоборот, стремиться к минимализму!)) Хочу, чтобы PageInsight или как его там, показывал больше 80))

    1. Азик, как ты помнишь о моей ноге? Ты меня приятно удивляешь 03 

       Анимированный текст — штука клевая и даже прикольная, но я решил больше не нагружать сайт ничем и никак!) Наоборот, стремиться к минимализму!)) Хочу, чтобы PageInsight или как его там, показывал больше 80

       
      Да, я тебя понимаю, но каждый раз, когда я экспериментирую с такими штуками, то всегда прежде всего проверяю повлияло ли это на скорость загрузки сайта и результаты проверки сервиса PageInsight 
      Пока что, никаких серьёзных изменений не было!

  7. Александр Каратаев:

    Я как-то на сайте (не наблоге) делал подобное на чистом JavaScript, но потом понял, что все эти летающие, ползающие, падающие и т.д. тараканы просто раздражают. А когда выложил сайт на обсуждение профи и они раскритиковали ещё и за флеш-анимацию там, я всё убрал. И с тех пор подобными вещами не пользуюсь.
    Но тут, как говорится, на вкус и цвет…

    1. Александр, вы абсолютно правы! Тараканы, летающие, падающие и ползающие очень раздражают! 
      Чтобы вы правильно поняли, я не агитирую украшать подобной анимацией весь сайт, но если будет один коротенький и невзрачный кусочек текста такой уникальный, то это может очень привлечь внимание и впечатлить!  

  8. Игорь:

    Спасибо Игорь за интересную статью. Такую анимацию можно сделать без плагинов установив специальные скрипты. 
    У меня на сайте тоже есть анимация как у тебя, плавно меняется цвет при наведении мышки, сделал на css.

    1. Привет Игорь! Рад видеть тебя в гостях.
      То что можно сделать подобную анимацию с помощью скриптов и CSS я знаю. Я же это написал даже в начале статьи, но не каждый это умеет и хочеть влезать в файлы блога. Поэтому плагин для них будет идеальным решением.

  9. Татьяна:

    Привет, Игорь! Прикольная фишка, классно смотрится, может себе как-нибудь сделаю. 

    1. Привет Таня! Ну попробуй. Иди знай, может из-за неё привлечёшь дополнительных посетителей 07

  10. Приветствую, Игорь. Интересные эффекты получаются! Это можно акценты в статье расставить и обратить внимание читателя на то, что нужно. Надо покрутить этот плагин.

    1. Здравствуй Александр! Эффекты и поавда очень интересные получаются с помощью этого плагина. Здесь главное не переборщить.
      Спасибо вам за комментарий

  11. Это вопрос или пояснение?

  12. Алексей Щукин:

    Если честно, то пока не знаю как применить данный плагин у себя на блоге, но на заметку информацию из статьи возьму. Кто его знает, что завтра взбредет в голову, вдруг, захочется как-то прикольно приукрасить блог 16.

    1. Привет Алексей.
      На самом деле, все звисит только от фантазии. Можно украсить абсолютно любой текст. Например посмотри как это у меня. Выбери какой нибудь постоянный текст, который фигурирует в каждой статье и добавь этот эффект. Попробуй единожды, если начнет раздражать, то убери. Ведь никто не заставляет. Но…может выйти и правда прикольно, главное не переусердствуй.

  13. Это действительно красиво и оригинально. Только вопрос в том, насколько данный плагин тормозит блог?06

    1. Привет Андрей! После установки и использования плагина в течение более месяца, я не заметил никаких тормозов блога! Проверял во всех сервисах, которые определяют скорость загрузки сайта и везде скорость осталась такая же, как и была до установки плагина! 

      Возможно, что плагин будет грузить сайт, но только в том случае, если переусердствовать с ним! То есть, использовать его очень много и часто в каждой статье. Но зачем это делать? Тогда пропадёт весь его эффект, не так ли?

  14. Спасибо за полезняшку, Игорь. Попробую где-нибудь применить этот плагинчик! yes 

    1. Давай, попробуй. Потом покажи как это выглядит 02

  15. Ничего у меня не получилось, Игорь. Почему, не знаю. Плагин удалила с сервера.  🙁 

    1. Андрей Косолапов:

      Елена, Игорь у меня тоже не получилось. Вернее анимация то была, это получилось, а вот цвет текста меняться не хотел. Так что я его тоже отправил в баню.14
      Жалко.

      1. Жаль, что у вас не получилось. На самом деле, я уже не в первый раз слышу, что плагин не работает на разных шаблонах. Но я уверен в том, что если вы обратитесь к Александру (разработчику плагина) то он сможет в чем то помочь.

  16. Мне интересно, хочу попробовать!

  17. Видел я такие падающие буквы на нескольких блогах. Смотрится отлично. Возьму название плагина себе на заметку.   🙂 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Следите за новостями блога

Получайте новые статьи блога на ваш email

email рассылки Конфиденциальность гарантирована
Реклама
Последние комментарии
  • Игорь Черноморец { Здравствуй Олег. Рад, что статья оказалась полезной. Хотя...уже несколько лет не пользовался сервисом и не... }
  • Олег { Спасибо за статью. Все очень хорошо написано. Вы подтвердили мои сомнения. }
  • Dima { С Instagram к сожалению эта фишка не работает. 🙂 (:sorry:) }
  • Назар { Оптимизация картинок онлайн это действительно важно! Сам недавно сделал свой сайт и начал осваивать SEO,... }
  • seoonly.ru { да, раскручивать все сложнее и сложнее }