Красивые эффекты для ссылок

ГлавнаяJava скрипты → Эффекты для ссылок

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

Для тех, кто не знает (совсем для новичков), как установить ссылку на свой сайт, показыаю: вставляете в нужное место страницы, вот такой код:
<a href="http://ваш-сайт.ru">Ссылка</a>

В этот код по нужде можно добавить следущие параметры, как:

  • class и id - для оформления ссылки;
  • rel="nofollow" - для сокрытия ссылки от поисковика
  • target - указывает в каком окне будет открываться ссылка (если в этом же, то его прописывать не нужно).

Пример:
<a href="http://ваш-сайт.ru" class="class4" target="_blank">Ссылка</a>


Перейдём непосредственно к эффектам для ссылок:

Первый пример (эффект при нажатие на ссылку):

Кликни меня

Код для ссылки:


<a href="javascript:void(0);" id="click">Кликни меня</a>

Второй пример (эффект при наведение на ссылку):

Наведи на меня

Код для ссылки:


<a href="javascript:void(0);" id="mouseover">Наведи на меня</a>

Третий пример (при нажатие - эффект на другом объекте):

Нажми на меня

Код для ссылки:


<a href="javascript:void(0);" onclick="mo.drop();">Нажми на меня</a>

Четвёртый пример (обратный эффект при нажатие на ссылку):

А теперь здесь

Код для ссылки:


<a href="javascript:void(0);" id="reverse">А теперь здесь</a>

Пятый пример (маленький эффект при нажатие):

Попробуй

Код для ссылки:


<a href="javascript:void(0);" id="opacity">Попробуй</a>

Шестой пример (красивый красный эффект при клике):

Жми не бойся

Код для ссылки:


<a href="javascript:void(0);" id="border">Жми не бойся</a>

Седьмой пример (постоянный эффект после нажатия):

И последний

Код для ссылки:


<a href="javascript:void(0);" id="loop">И последний</a>

Важно!
После того, как скачаете данный скрипт (ниже), не забудьте прописать нижеуказанный код перед закрывающимся тегом </body>:


<script type="text/javascript" src="js/waterDrop.packed.js" ></script>
<script type="text/javascript">
var w = new waterDrop("click");
var mo = new waterDrop("mouseover", {event:"mouseover"});
var w = new waterDrop("reverse", {reverse: true});
var w = new waterDrop("opacity", {expand: false, padding: 5});
var w = new waterDrop("border", {borderStyle: "dashed", borderColor: "red", borderWidth: 4, borderRadius: 50});
var l = new waterDrop("loop", {onend: function(){setTimeout(function(){l.drop();}, 500)}});
</script>

Все приведённые эффекты для сылок легко настраиваемы по цвету рамки о обхвата.

И попутно такой же эффект можно применить для всех объектов (не только ссылок) находящихся на странице. И эти все примеры и скрипты Вы найдёте в архиве.

Скачать скрипт - Красивые эффекты для ссылок

А следущую тему для рассмотрения, я выбрал довольно популярную и совсем не сложную - как добавить сайт в избранное, или в закладки.

Поделись ссылкой с друзьями:

Комментарии к статье

Виктор 01-04-14

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

Admin 01-04-2014

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