ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Проект от команды FD

☑ Поиск роли, партнёра, игрока.
☑ Легко. Удобно. Современно.
☑ Мы в процессе разработки.

Читать спойлеры

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Начался второй тур лотереи для форумов "Новогодний кот". Подаём заявки на участие до 8.12. Не пропустите!
Ищешь чем бы украсить свой форум или сайт к Новому году? 🎄 Мы поможем нарядиться! 🎄

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



Переливающиеся ссылки (Javascript + jQuery / CSS)

Сообщений 1 страница 10 из 17

1

Переливающиеся ссылки на css через keyframes. Версия от БРОДЯГИ:

[html]<style type="text/css">
a:hover {
  animation: shining 2s linear infinite normal;
}

@keyframes shining {
  0%{
    color:red;
  }
  33%{
    color:green;
  }
  66%{
    color:blue;
  }
}
</style>

<a href="">Наведи курсор</a>[/html]

И собственно код (в хтмл-верх или без <style type="text/css"></style> в стиль):

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Это краткий код с объединением нескольких атрибутов в один (так же, как с border или background проворачивают).
Поподробнее о каждом пункте:
a:hover - Применится ко всем ссылкам на форуме при наведении на них (если в стиле не указано иного для тех или иных селекторов). Можно задать свой селектор.
Вместо shining можно написать что-то другое, но оно должно совпадать с тем, что указано в @keyframes. Короче, то, что выделено красным должно быть одинаковым.
@keyframes - правило с описанием ключевых кадров анимации. Таких правил в стиле может быть несколько, поэтому каждому нужно своё название. И, соответственно, в значении атрибута того или иного селектора указывается имя нужной анимации, как в данном случае.
Цвета и их количество, длительность, характер анимации (ускорение, замедление в начале или конце), сколько раз проигрываться и т.п. - всё настраиваемо.


Версия от Deff:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.


JQuery версия от RUSSIAN_GOBLIN:

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Отредактировано Герда (19.05.13 17:43)

+2

2

А не проще ли через css transition? Пусть не кроссербраузерно, на функционале не скажется. Зато просто, можно настраивать самому без особых знаний, и форум лишними скриптами не нагружается.

Подпись автора

http://s3.uploads.ru/r9Miq.gif

+2

3

mintemero
Речь идёт не о плавном переходе ссылок из одного цвета в другой, а о переливании ссылок несколькими цветами. :)

+2

4

faiko
Пашина - и моя ужатая - могут и на укозе работать
Ужатая - еще и минимизирует переменные, что сводит к нули конфликты

Подпись автора

Скрипт мгновенных уведомлений new
(для замены от rusff), Платно! писать в Лс на РЕНО

+3

5

Красота это страшная сила .Всем Спасибо

+2

6

А где-то Демо есть?

+2

7

#p146312,marusya написал(а):

А где-то Демо есть?

Примерно так, только цвета другие и переливаются только при наведении на ссылку. Ставить в хтмл-низ.

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+3

8

Сейчас, в принципе, фишку с переливающимися ссылками можно проворачивать без яваскрипта сразу в css через keyframes.

Вот как-то так:

[html]<style type="text/css">
a:hover {
  animation: shining 2s linear infinite normal;
}

@keyframes shining {
  0%{
    color:red;
  }
  33%{
    color:green;
  }
  66%{
    color:blue;
  }
}
</style>

<a href="">Наведи курсор</a>[/html]

И собственно код (в хтмл-верх или без <style type="text/css"></style> в стиль):

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

Это краткий код с объединением нескольких атрибутов в один (так же, как с border или background проворачивают).
Поподробнее о каждом пункте:
a:hover - Применится ко всем ссылкам на форуме при наведении на них (если в стиле не указано иного для тех или иных селекторов). Можно задать свой селектор.
Вместо shining можно написать что-то другое, но оно должно совпадать с тем, что указано в @keyframes. Короче, то, что выделено красным должно быть одинаковым.
@keyframes - правило с описанием ключевых кадров анимации. Таких правил в стиле может быть несколько, поэтому каждому нужно своё название. И, соответственно, в значении атрибута того или иного селектора указывается имя нужной анимации, как в данном случае.
Цвета и их количество, длительность, характер анимации (ускорение, замедление в начале или конце), сколько раз проигрываться и т.п. - всё настраиваемо.

Подпись автора

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

+4

9

#p146354,бродяга написал(а):

Сейчас, в принципе, фишку с переливающимися ссылками можно проворачивать без яваскрипта сразу в css через keyframes.

До чего техника дошла!  smalimg Выходит, в шапку надо добавить как это сделать на ксс?

Подпись автора

"You don't need to be protected,
Because nothing shocks you any more."
© Mesh
https://forumstatic.ru/files/0015/1e/ae/69675.gif https://forumstatic.ru/files/0018/3d/6c/77729.jpg

+3

10

#p146363,Automation Baby написал(а):

До чего техника дошла!  https://i.imgur.com/1aMssj5.png

Да я ещё года полтора назад такие штуки с миганием практиковал)

#p146363,Automation Baby написал(а):

Выходит, в шапку надо добавить как это сделать на ксс?

Хороший вопрос, видимо, да) Ну а как работать с ключевыми кадрами анимации для лучшего понимания - это уже в гайдах, наверное, стоит осветить)

Подпись автора

https://forumupload.ru/uploads/0018/1e/e2/2/295990.png
мой графоний
заказать вёрстку

+3