Техническая поддержка сервиса Quadro.Boards

Объявление

Новости сервиса

О форуме

Quadro.Support – это форум технической поддержки различных проектов и сервисов Quadro.Systems LLC, на котором грамотные технические специалисты всегда смогут помочь вам в решении проблем, или же подсказать ответы на самые сложные вопросы. Так же на форуме собрана обширная база знаний по различным аспектам наших сервисов. Не забывайте пользоваться поиском ;)

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

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


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Переливающиеся ссылки (Версия на CSS 3)


Переливающиеся ссылки (Версия на CSS 3)

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

1

Альтернативный на js вариант
Голый CSS 3 и простенькая оболочка - и ничего больше :)
Пока что решение ещё сырое, так как не все браузеры включили полноценную безпрефиксную форму решения. Так что в ближайшее время придётся менять 4 части (после перехода Opera на Chromium - 3).

И ещё: решение не кроссбраузерное. Поддерживаемые версии браузеров:
http://htmlbook.ru/themes/hb/images/browser_fx.png Mozilla Firefox 5+
http://htmlbook.ru/themes/hb/images/browser_ie.png Internet Explorer10+
http://htmlbook.ru/themes/hb/images/browser_cr.png Google Chrome
http://htmlbook.ru/themes/hb/images/browser_sa.png Safari 4+
http://htmlbook.ru/themes/hb/images/browser_op.png Opera 12+

Так как решение "в лоб" весьма громоздко и содержит в себе много повторений, так что я создал небольшой php-скрипт, который генерирует требуемый код по минимальному количеству начальных значений. А, так как передача параметров через адресную строку требует нескольких т.н. хаков, то я завернул это в простенькую js-оболочку.
Вот что вышло...

Код ниже можно вставлять в абсолютно любое место html (верха, низа или формы ответа - неважно), НО предпочтительнее в html-верх, особенно для тяжёлых форумов.

Итак, данная функция подгружает код по вводимым параметрам.

Код:
<script>function getCuteLink( sel, colors, time ) {
  $('head').append('<link rel="stylesheet" href="http://www.kozhilya.ru/scripts/demos/cuteLinks/genCss.php?sel='+encodeURI(sel.replace(/#/g, '|'))+'&colors='+colors.join(',').replace(/#/g,'_')+((time)?'&time='+time:'')+'">');
}</script>

Параметры таковы:

Имя параметра

Описание

Пример

sel

Самый простой CSS-селектор, какой вы используете для обычного css.

'a#psy'

colors

Массиы цветов, которые буду меняться, либо в буквенном, либо в HEX-представлении. Внимание: псевдофункции rgb, hsv и rgba работать не будут

[ 'red', 'yellow', '#00FF00', 'aqua', 'blue', 'purple' ]

time

Необязательный параметр. Период повторений смены цветов в секундах. По умолчанию: 0.5 * <Количество цветов в графе colors>

0.1

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

<script>getCuteLink( 'a', [ 'red', 'yellow', 'green', 'aqua', 'blue', 'purple' ] );</script>


А для психоделически моргающей - такой:

<script>getCuteLink( 'a', [ 'white', 'transparent' ], 0.1 );</script>


Есть, правда, один нюанс: что бы при наведении курсора ссылка не моргала, пришлось сделать так, что бы ссылка в нормальном положении была того цвета, который был указан первый.

Демонстрация и более подробная документация

+3

2

На самом деле очень интересная вещь, в скором времени при подобающей обработке будет использоваться на почти всех форумах. Только вот есть немного вопросов:
1. Как я понял это частота "переливания"? В подробной документации три версии плавности, медленная, средняя и очень быстрая. Это регулируется, а если сделать что бы три цвета, предположим, переливались медленно? Из одной цветовой гаммы, это допустимо?
2.

kozhilya написал(а):

нная функция подгружает код по вводимым параметрам.

это HTML-низ не путаю?

0

3

kozhilya написал(а):

Итак, данная функция подгружает код по вводимым параметрам.

:confused: Для обывателей...что ставить и куда. :D
Чуть попроще объясняйте, а то голова идёт кругом)))
Будут переливаться все активные ссылки?

kozhilya написал(а):

Демонстрация и более подробная документация

Почитала)) слабо дошло)) но понравилось)))

kozhilya написал(а):

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

так, где указывать этот самый первый цвет? :confused:

0

4

enotit. написал(а):

1. Как я понял это частота "переливания"? В подробной документации три версии плавности, медленная, средняя и очень быстрая. Это регулируется, а если сделать что бы три цвета, предположим, переливались медленно? Из одной цветовой гаммы, это допустимо?

Нет, параметр time - это период (в математическом и физическом смысле этого слова) изменения цвета. Чем больше значение переменной, тем дольше происходит анимация, и наоборот.

Что бы три цвета переливались медленно можно сделать так:

<script>getCuteLink( 'a', [ 'color1', 'color2', 'color3' ], 10 );</script>

color1, color2 и color3 - заменить на названия или hex-коды ваших цветов.
В данном случае каждый цвет будет меняться раз в 10/3 = 3,33 секунды, то есть повторение всех 3 цветов будет раз в 10 секунд.
В частота изменения цвета в демонстрции следущие: у медленного - раз в 0,83 секунды (6 цветов на 5 секунд), у среднего - раз в 0,5 секнуд (значение по умолчанию, вычисляется по формуле (см. таблицу параметров)), у быстрого: раз в 0,05 секунды (2 цвета за 0,1 секунды).

enotit. написал(а):

это HTML-низ не путаю?

Не важно, главное: ДО вызова функции (последние 2 кода)

0

5

TeSS написал(а):

Для обывателей...что ставить и куда.

Куда угодно... Но рекумендую в html-верх. причём первый код - раньше, чем все остальные.

TeSS написал(а):

так, где указывать этот самый первый цвет?

В массиве.
Так, ладно... Сейчас наваяем генератор, а то я не знаю, как объяснить... ><

TeSS написал(а):

Чуть попроще объясняйте, а то голова идёт кругом)))

Как умею  :dontknow:

0

6

Есть переливающие от rps

http://forumdts.org/viewtopic.php?id=3089

+1

7

Deff
У вас переливание сделано на JavaScript. Это универсально, но не эффективно.
Моя же версия на CSS 3, с использованием самых последних стандартов. Это прогрессивно, а главное - анимацией занимается не процессор, а графический процессор (по крайней мере, в Google Chrome).
И, используя ваш же довод на том форуме - он работает на Юкозе, а переменных не требует вообще никаких :)

0

8

kozhilya
Да я просто альтенативу, с другой стороны про

kozhilya написал(а):

- анимацией занимается не процессор, а графический процессор (по крайней мере, в Google Chrome).

Спорно, к примеру box-shadow с полгода назад страшно вешал все браузеры, ежели ему сделать размывание более 200 - 300 пиксел
Второе, много пожилых на форумах(около 12%) использующие старые иЕ6-7, поскольку к иным браузерам  кроме Ие нет привычки  и ХР левая, 6-7 лет, -  и обновление даже до ИЕ8 означает платную переустановку Оси

Отредактировано Deff (06.03.2013 20:20:18)

0

9

Deff
Решения на js - в соседней теме Переливающиеся ссылки

kozhilya
Может указать в первом посте ссылку на альтернативы на js (пояснив чем лучше одно и другое)? А я приберусь в теме с js, м?

//после чего этот пост можно удалить.

0

10

Offtopic
Deff написал(а):

Спорно, к примеру box-shadow с полгода назад страшно вешал все браузеры, ежели ему сделать размывание более 200 - 300 пиксел

Полгода?  :no:  А вешать box-shadow большие значения - это, в некотором смысле, глупо и неправильно.

Deff написал(а):

Второе, много пожилых на форумах(около 12%) использующие старые иЕ6-7, поскольку к иным браузерам  кроме Ие нет привычки  и ХР левая, 6-7 лет, -  и обновление даже до ИЕ8 означает платную переустановку Оси

Откуда такие данные??? По данным Microsoft в России это число - 0,4%.
Кроме того, лично я думаю, что всем, кто имеет хотя бы IE 7 - вешать предупреждание на полэкрана, что "Ваш браузер устарел. Обновите его, наконец".
Internet Explorer 8 доступен для XP.

0

11

Та ну, молодой ти, "по- коням", зайди на сайты с собачками и с вязанием и пирожками, младшему персоналу под сорок, типовой 50-60,   И все там будем, не смотря на MГУ( у меня мама и братик тож заканчивали, дык на старости от болячек и дум про них и заботы - не спасает
Микрософт пишет про мировое %, а там Китай

Отредактировано Deff (06.03.2013 23:54:49)

0

12

Deff
И к чему этот пост был??
Форумам, у которых целевая аудитория люди от 50 лет, навряд ли понадобится какая-либо анимация: эстетика совершенно не та.
А сайты под ИЕ6 подгонять... Простите, но мы не в Китае живём.

0

13

kozhilya
Просто спичь был о том что на майб ИЕ порядка от 8 до 14%, тут спецом как то с Кафланом статистику собирали, но это с год
А про подгонять никто и не говорит, ну про js - ссылки вчера пост видел, думал сунул туда -же, не глянул первопост,  можно убрать

0


Вы здесь » Техническая поддержка сервиса Quadro.Boards » Оформление форумов » Переливающиеся ссылки (Версия на CSS 3)


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC