ГлавнаяВёрстка WordPress › Как заставить ссылки дрожать?


Как заставить ссылки дрожать?


анимированный текстЗдравствуйте, дорогие читатели – Sozdaiblog.ru!

В этой статье Вы узнаете, как создать эффект содрогания ссылок на Вашем ресурсе.

Для начала я хочу сделать небольшое объявление!

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

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

Это первая статья из общего цикла новых публикаций. Чтобы не пропустить остальные, предлагаю подписаться на обновления блога и получать уведомления о выходе нового материала на Ваш адрес электронной почты.

 

Анимированный текст: эффект — «Дрожь».

Чтобы сделать эффект содрогания, нужно открыть файл «header.php», который находится в папке с Вашей активной темой оформления и между тегами — <head> < / head>, вставить следующий скрипт:

 


<style>

.jc {
position:relative;
margin-left: 45%;

}
</style>

<script type="text/javascript">

var pauseFactor=19;

function jiggleit(num){
this.el=jiggleit.el('jiggle'+num);
this.to=80;
this.jig=function(){
var c=this; if(pauseFactor){c.t=c.t? ++c.t : 1;
if(c.t%pauseFactor==0){c.to=pauseFactor*80;c.t=0;
} else c.to=80;}
c.el.style.left=(parseInt(c.el.style.left)==1)? '-1px' : '1px';
setTimeout(function(){c.jig();}, c.to);
};
this.jig();
};

jiggleit.el=function(id){
return document.all? document.all[id] : document.getElementById(id);
};

jiggleit.init=function(){
var i=0; while(jiggleit.el('jiggle'+i))
i++; if(i--) for (i ; i > -1; --i)
new jiggleit(i);
}

if(document.all||document.getElementById)
window.onload=jiggleit.init;
</script>

 

Затем, во время написания статьи в режиме HTML редактора, нужно обернуть Вашу ссылку следующими тегами:

 

<span id="jiggle0" class="jc">Ваша ссылка</span>

 

На этом всё. Теперь Ваша ссылка будет дрожать от страха.

 

ДЕМО СКАЧАТЬ

 

Чтобы отрегулировать скорость вибрации, достаточно в скрипте найти цифру 80 и установить необходимое значение.

Таким образом, можно заставить дрожать не только ссылки, но и любой текст на Вашем ресурсе.

С помощью данного скрипта, можно привлечь внимание посетителей к определённым участкам сайта.

Скажите друзья, была ли Вам полезна данная анимация текста?

До следующих спецэффектов…

 

С уважением, Денис Черников!




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




38 комментариевА что думаете Вы?

  1. Остап

    А я было подумал что речь пойдет о том как повысить цену на продаваемые ссылки, невнимательно прочитал название поста ))

    [Ответить]

    Денис Черников ответил:

    Ого, прикольно! А как Вы так пришли к этому?

    [Ответить]

  2. Сергей

    посмотреть бы этот эффект в действии, а то у меня не работает.

    [Ответить]

    Денис Черников ответил:

    Работать должен у всех! Что-то не так Вы делаете! Кэш чистили?

    [Ответить]

  3. Svetlana

    Привет, Денис!

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

    Но ничего одолею все.

    Пойду гляну, что за конкурс.

    [Ответить]

    Денис Черников ответил:

    Привет, Свет!

    Давно ты не заходила в гости, как сама?

    А что у тебя там за заказы, если не секрет?

    За мной гнаться не нужно, делай всю размеренно, поставь цели и иди к ним, а я подскажу если что!)

    Конкурс интересный, надеюсь на твоё участие в нём!

    [Ответить]

    Svetlana ответил:

    Я мельком читаю статьи. Заказы по вышивке картин крестом и бисером и написание дипломов по психологии и педагогике.

    Почему то все активные становятся к Новому году, как будто в течение года нельзя было все спланировать.

    А я иду потихоньку, вот по твоим урокам сео сделала и в конкурсе по сео вошла в топ-3 гугла!!!!

    [Ответить]

    Денис Черников ответил:

    Да ты рукодельница! Жена тоже из бисера плетёт!

    Поздравляю с победой! Значит статья принесла пользу!

    [Ответить]

    Svetlana ответил:

    Спасибо, Денис, за поздравления! Думаю, моя победа — это и твоя заслуга, если бы не стала изучать вплотную твой сайт, точно бы победы не было!

    А рукодельница — да! Мне легче иглой картины вышивать, чем эти коды осваивать...

    А работы твоей жены можно посмотреть?

    [Ответить]

    Денис Черников ответил:

    Думаю, что это наша общая заслуга! Жена говорит, что позже! Она работы хранит вне дома. Сделает фотки, обязательно на почту тебе брошу!

  4. Саня

    Не робит. Давай другой скрипт ...

    [Ответить]

    Денис Черников ответил:

    Не знаю, как и что Вы там делаете, всё проверенно пять раз и всё работает! Может Вы кэш не чистите или у Вас браузер IE!

    [Ответить]

  5. Иван Бабаш

    Денис, а где сам пример — дрожание ссылки? Или что то у меня не реагирует на ссылку?

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  6. Молодой искатель

    Ничего сложного. Сделал. Не трясутся. Жду пример...

    [Ответить]

    Денис Черников ответил:

    На двух сайтах делал, всё работает! Кэш чистили?

    [Ответить]

  7. Ирма

    Денис, добрый вечер!

    Спасибо за статью. Но сама я пока повременю с такими ссылками. Хотелось бы посмотреть наглядный пример. Но вот прочитала, что Вы еще у себя не установили. Посмотрю, если понравится, тогда сделаю.

    [Ответить]

    Денис Черников ответил:

    Добрый, Ирма!

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

    [Ответить]

  8. Олег

    Скрипт интересный для прикола, но пользы от этого никакой, только лишний скрипт. Но на время поставить можно, попугать посетителей :-) .

    [Ответить]

    Денис Черников ответил:

    Так он и есть для привлечения посетителей!

    Кстати, если пофантазировать, можно найти очень интересное применение!

    [Ответить]

  9. Александр Красильный

    Мастер хаков снова в деле! =) Сегодня мой комментарий первый с конца, хотя на момент его одобрения он может быть уже и не первым.

    За скрипт спасибо, может быть и найдется ему применение в будущем!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Александр!

    Если включить фантазию, можно всё что хочешь в дело воспроизвести!

    [Ответить]

  10. Томский школьник

    Хм, интересно) Только бесполезно думаю, разве что позабавить читателей :-)

    [Ответить]

    Денис Черников ответил:

    Можно позабавить, а можно к нужной ссылке прикрутить, по которой должны обязательно кликнуть!

    [Ответить]

  11. Евгения

    Здравствуйте, Денис! У меня тоже, почему-то не получается заставить ссылку дрожать... Поставила код перед закр. тегом , кеш почистила. Не пойму в чем дело, может Вы подскажете? Может с темой конфликтует, я не особо разбираюсь в этом? Но мне очень нравятся ваши уроки, теперь практически не хожу на другие сайты, только к вам за новыми подсказками да штучками, типа этой.

    А о каком конкурсе говорит Светлана, я бы с удовольствием поучаствовала, если это возможно? Моему сайту скоро год — Тиц Яндекс не дает, только PR Google 1 пожаловал. Замучилась с этим SEO продвижением...

    Вот ссылка на статью в которой пыталась установить испуганную ссылку: http:// lebeddeva.ru/lebedinyie-recepty-blyud/recept-zapechennogo-gusya/utka-po-pekinski

    Асама ссылка, которая не хочет трястись «Все статьи сайта», в конце статьи.

    [Ответить]

    Денис Черников ответил:

    Привет, Евгения!

    А вы как копируете? Сразу с сайта вставляете в свой шаблон или в какой нибудь блокнот вставляете, а потом в свои файлы темы вставляете?

    Обратите внимание на такую вещь — если после вставки кода в HTML-редакторе переключиться в Визуальный, то по возвращению половина кода сносит. Понаблюдайте за этим!

    [Ответить]

  12. Евгения

    Здравствуйте, Денис! Я всегда коды прямо с сайта копировала, а оказывается надо через сохранение в блокноте... Опять для меня открытие, спасибо! Вставила код через блокнот, но это не помогло, ссылка не задрожала.

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

    ,

    а после переключения на текстовой режим у меня получилось:

    .

    Что нужно сделать??? чтобы тег оставался в первоначальном варианте.

    Я это замечала раньше, но когда тег исчезал в режиме HTML просто оборачивала его таким образом: и тогда все оставалось на месте, а как поступить в нашем случае? Ведь тег не исчезает, просто его составляющие меняются местами.

    Денис, благодарю Вас за внимательное отношение к каждому Вашему читателю и поздравляю Вас и всех гостей Вашего сайта с наступающим Новым 2013годом!

    [Ответить]

    Денис Черников ответил:

    Приветствую Вас, Евгения!

    Спасибо за поздравления, Вам тоже всего самого доброго в Новом году!

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

    [Ответить]

  13. Игорь

    Заинтриговало название поста! Наверное, положительно скажется данный эффект на повед. факторах.

    [Ответить]

    Денис Черников ответил:

    Эффект прикольный, но пока мало кто его использует!

    [Ответить]

  14. Максим

    Не подскажите, как можно сделать задержку встряхивания периодом примерно 60 сек что бы она не встряхивалась ?

    [Ответить]

    Денис Черников ответил:

    Поиграйтесь с цифрами, выставите большее значение!

    [Ответить]

  15. Максим

    не получается уже побывал (:

    [Ответить]

    Денис Черников ответил:

    Тогда нужно скрипт писать новый иди модернизировать этот!

    [Ответить]

  16. Максим

    жалко я не понимаю в script мне не суждено может ты подскажешь где что прописать в нем ?

    [Ответить]

    Денис Черников ответил:

    Извините, но тут мне больше нечего подсказать, если срочно нужен скрипт наймите фрилансера и он Вам его сделает!

    [Ответить]

  17. Алексей

    Денис привет! Зашел к тебе за одной штукой а наткнулся на эту. Сделал все за минуты три, и все получилось с первого разу. Только одна проблемка: окружил ссылку в верхнем меню,(окружил в редакторе прямо в заголовке), И теперь при просмотре там появился широкий промежуток пустой — в итоге ссылка трясется, но промежуток портит все (( можно ли исправить?

    А теперь то за чем пришел — Денис, подскажи статью, как избавится от спам-комментариев в WordPresse? Одолели уже!

    [Ответить]

    Денис Черников ответил:

    Алексей, рад что у Вас сразу всё срослось!

    На счёт отступов, то я не вижу и не понимаю о чём речь!?

    А статья у меня есть такая, через поиск поищите!

    [Ответить]

Оставить комментарий!

Вверх