Двигающиеся картинки на сайте. Как привлечь ещё больше внимания?
Привет читателям и гостям блога Seo bloga Fomika! Как ваше настроение? Если оно у вас сейчас унылое, то я постараюсь в этом посте вам его поднять. Как? Очень просто – двигающимися и прыгающими картинками. Update: Данный плагин работает на версиях WordPress ниже 3.7.1
Я расскажу сегодня про классный плагин, который заставляет картинки у вас на блоге двигаться. Нет, это не формат гиф, это намного круче…
Скачать двигающиеся картинки
Как заставить картинки в посте прыгать или двигаться?
Для этого нужно всего-навсего установить себе на блог замечательный плагин SoreThumb. Лично я обозвал его “прыг-скок”.
Как работает этот плагин?
Плагин может осуществлять 8 различных движений в посте и на главной (Несколько дней я мучился с тем, чтобы “завести” картинку на главной и наконец-то решил эту задачу. Вот почему этот пост выходит с задержкой…)
Итак, вот эти движения:
- Tada! — не переводится, но прикольно
- Pulse — импульс
- Flash — вспышка
- Bounse — отскок
- Shake — тряска
- Wobble — дрожь
- Wiggle — покачивание
- Swing — колебание
Плагин буржуйский, но перевести при помощи браузера и разобраться в нём будет не сложно, тем более я вам всё расскажу. Из админки его не скачать. Бесплатно скачать его вы можете из моего дропбокс ящика, предварительно кликнув на одну из 3-х соц-кнопок на выбор.
Процедура установки и активации — обычная. После установки плагина в админке появляется отдельный раздел для его настроек.
По клику вы переходите в настройки плагина. На этой страничке настроек вы будете настраивать движения элементов на главной, так как настройка в постах будет непосредственно в редакторе, о чём я ниже расскажу.
Судя по панели настроек, можно использовать не более 3-х элементов. А больше и не нужно, так как переборщить можно с этим и оттолкнуть читателя. Правильно?
Сразу после установки и активации плагин по умолчании включён – Enabled.
Как заставить картинку плясать на главной странице?
Сейчас я вам расскажу и покажу, как настроить движение элемента на главной странице, так как это сложнее, чем в посте. Настраивать плагин я рекомендую на Денвере или поддомене, так как неизвестно, как поведёт себя у вас этот плагин, но я сам настраивал на реальном сайте, и ничего – всё отлично.
В поле Элемент 1 введите идентификатор элемента например, # theid и выберите эффект. Элемент 2 и Элемент 3 пока оставьте пустыми. Затем сохраните настройки. Не знаю какую фигуру вы будете активировать, я выбрал рисунок коробки моего бесплатного видеокурса. Код этой картинки вставлен у меня в виджете, в сайтбаре.
Открываем этот виджет и начинаем редактирование. Вот как выглядит мой отредактированный код.
Жирным я обозначил ту нужную строчку кода, в которую вы должны заключить код вашего изображения на главной, чтобы оно заработало. Зелёным – это название эффекта, которое отвечает за вид движения. Чтобы поменять эффект движения, поменяйте его в настройках плагина и пропишите в коде картинки. Попробуйте, у Вас должно всё получится и заработать.
Вот показываю ещё раз правильную строчку кода —
<span id="theid" rel="pulse"> код от картинки на главной </span>
Как сделать танцующими изображения и текст в посте?
После активации плагина, инструмент, которым мы будем приводить в движение элементов в посте, вы увидите в текстовом редакторе. Это маленькая мишень и чекбокс с выбором эффектов.
Чтобы заставить элемент двигаться, нужно сначала выделить его, если это текст, и нажать на мишень, а затем выбрать эффект движения. В случае картинки в посте, то сначала нажимаем на неё, затем жмёте мишень и потом выбираете эффект.
После установки и активации плагина, под редактором контента появится ещё одно поле настроек этого плагина, но как я не проверял и не вносил туда изменения, они не сказывается на работе плагина. Но на всякий случай я продублировал некоторые значения. Например время действия эффекта и пауза между ними. Хотя галочка в чекбоксе — /Включить соретрамб/ у меня не стоит, плагин отлично работает…
Попробуйте и вы поработать с этим интересным на мой взгляд плагином, а если у вас возникнут какие-то проблемы – отпишитесь в комментах, я постараюсь вам помочь.
Как отключить пляшущие картинки и текст?
Можно конечно просто отключить плагин и изображения успокоятся, но нам ведь это не нужно, правильно? В настройках этого плагина я не нашёл никакой кнопки отключения самих картинок, поэтому всё придёться делать вручную. Это не сложно. Нужно просто удалить этот код и всё. В редакторе – в режиме HTML естественно, ну а на главной, там итак всё в этом режиме. Только не удалите ничего лишнего…
Друзья, тот кто не сможет настроить этой прыг-скок плагин, пишите мне, я вам помогу в этом. По крайней мере, бесплатно помогу первым 10 обратившимся…
Победитель конкурса комментаторов за декабрь
В прошедшем сезоне моего ежемесячного марафона комментаторов, победу вновь одержала Анна – автор блога Отпускник Аня активно и содержательно комментирует мои посты уже 2 месяца. Молодец, так держать Аня! Мои поздравления!!! 100 рублей плывут в твой электро-кошелёк…
А Победителем кроссворда № 5 стал Денис, автор блога wpixel.ru Приз я уже перевёл ему на следующий день, после выхода этого кросса. Поздравляю тебя Ден с очередным выигрышем на моём блоге! Розыгрыша в номинации “Случайный счастливчик” не будет по причине, которую я опишу ниже.
К сожалению, пока я приостанавливаю выход очередных кроссвордов из-за того, что не могу пока добыть прогу, которая будет выявлять хитрецов (её автор пока молчит), а просто так дарить деньги нечестным людям я не желаю…
Пока, пока.
С уважением, ваш Fomik…
Я не большая поклонница прыгающего и мерцающего, но у многих замечала подобные эффекты. Оказывается это такой хитрый плагин! Леша, а за счет чего меняются картинки в шапке на главной странице?
P.S. Приз доплыл, большое спасибо!
[Ответить]
Алекс Fomik Reply:
Февраль 3rd, 2013 at 8:11 пп
Тут главное — не переборщить. Аня, — это слайдер.
[Ответить]
Прикольно. А как влияет SoreThumb на скорость загрузки сайта?
[Ответить]
Алекс Fomik Reply:
Апрель 14th, 2013 at 7:00 пп
Я не заметил особого торможения блога из-за него…
[Ответить]
Я не особо разбираюсь в компах, и всегда было интересно как сделать анимацию, теперь я все смогу. Спасибо разработчикам данного сайта
[Ответить]
Алекс Fomik Reply:
Декабрь 5th, 2014 at 12:30 дп
На здоровья! Да, все очень просто)))
[Ответить]
Я люблю делать гивки сам. придумывать раскадровку и прочее… Для меня это как микромультик.
[Ответить]
Алекс Fomik Reply:
Декабрь 12th, 2014 at 4:05 дп
Это здорово, что умеете сами делать гивки. Да, кстати, а при помощи какой проги вы это делаете?
[Ответить]
Давно хотел научиться но все никак руки не доходят! Очень полезная статья. Вот только я про плагины не очень понял
[Ответить]
Алекс Fomik Reply:
Декабрь 18th, 2014 at 12:03 дп
А что тут непонятного Марк… Плагин один и он устарел. Работает в версиях ВП ниже 3.7.1
[Ответить]