Вращяющиеся шары

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
romaamor

Re: Вращяющиеся шары

romaamor 29 окт 2013, 14:50 Сообщение

CabinetAdmin » 46 минут назад писал(а):Как двоится? Не должно ничего двоится, может тег случайно открытым оставил или?...

К примеру -
Изображение

Пробовал вставлять вместо

Код: Выделить всё

<a href="http://satray.ru/index.php">SatRay.ru</a>

Все на месте но вращающегося не чего не наблюдал.
Кеш чистил.

Аватара пользователя
CabinetAdmin

Re: Вращяющиеся шары

CabinetAdmin 29 окт 2013, 16:32 Сообщение

Поставь сейчас, посмотрим.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Вращяющиеся шары

romaamor 29 окт 2013, 16:35 Сообщение

Поставил. Пробовал поразному. :(

Аватара пользователя
CabinetAdmin

Re: Вращяющиеся шары

CabinetAdmin 29 окт 2013, 16:43 Сообщение

? А как оно будет?

Код: Выделить всё

  <td class="satname"> <a href="http://satray.ru/index.php">SatRay.ru</a> <img src="/images/kartinki/Satellite-icon.png" width="50px" alt="Спутниковый рай" /> <a href="./">SatRay.ru <span class="particle particle--c"></span> <span class="particle particle--a"></span> <span class="particle particle--b"></span> </a> <p>Спутниковый рай. Форум о спутниковом телевидении</p> </td>

Два раза написано, два раза и показывает... Поставь не после, а вместо:

Код: Выделить всё

<a href="http://satray.ru/index.php">SatRay.ru</a>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Вращяющиеся шары

romaamor 29 окт 2013, 16:51 Сообщение

CabinetAdmin » 4 минуты назад писал(а):Поставь не после, а вместо:

Тоже ставил. Нету шариков.

Аватара пользователя
CabinetAdmin

Re: Вращяющиеся шары

CabinetAdmin 29 окт 2013, 16:54 Сообщение

Сейчас вижу шарики.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Вращяющиеся шары

romaamor 29 окт 2013, 16:57 Сообщение

CabinetAdmin » 1 минуту назад писал(а):Сейчас вижу шарики.

Да. Заработало. :) Вот если бы вместо шариков картинки поставить...... :milo:

Аватара пользователя
romaamor

Re: Вращяющиеся шары

romaamor 29 окт 2013, 17:06 Сообщение

И обноружил проблемму. Перестало после этого работать верхнее меню.

Аватара пользователя
CabinetAdmin

Re: Вращяющиеся шары

CabinetAdmin 29 окт 2013, 17:21 Сообщение

Так поставь, у каждого шарика есть свой цвет, это классы .particle{, .particle--b{ и .particle--с{:

Код: Выделить всё

background-color: #00acff;

меняешь каждый цвет на изображение, небольшое желательно (не надо издеваться над пользователями), где нибудь максимум 20х20 пикселей:

Код: Выделить всё

background: url("/images.gif") no-repeat;


romaamor писал(а):Перестало после этого работать верхнее меню.

Выпадающий список, да, есть такое. Так и будет. У меня вообще форум стал сильно притормаживать :(
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Вращяющиеся шары

romaamor 04 ноя 2013, 01:50 Сообщение

Зы. Убрал я это.Верхние Меню приоритнтней.

Аватара пользователя
maco

Re: Вращяющиеся шары

maco 19 дек 2013, 18:36 Сообщение

Добрый день.
Хотелось бы из той же библиотеки поставить эффект flip, что бы вращался аватар (как в этой теме Украшение к новому году. Новогодняя шапка на аватар) при наведении на него мышью.
Вот код css.
animate.rar
(762 байт) 88 скачиваний

Вопрос, правильно ли я подключаю библиотеку? таким способом :<link href="{T_THEME_PATH}/animate.css" rel="stylesheet" type="text/css" /> в overall_header.
И в viewtopic_body.html заменить на

Код: Выделить всё

<a class="animate" href="{postrow.U_POST_AUTHOR}">

Тока не выходит ни чего :) , правильно ли я делал, видимо надо добавить эффект (класс) "При наведении на аватар мышкой".
Не подскажите как ? :)

Аватара пользователя
CabinetAdmin

Re: Вращяющиеся шары

CabinetAdmin 19 дек 2013, 19:05 Сообщение

maco писал(а):Вопрос, правильно ли я подключаю библиотеку?

Главное чтобы он был между <head>.

Сильно не разбирался в стилях. Но чтобы эффект был, класс нужно применять к изображению. Но только при наведении мышью, наверно скриптом... Поэтому ваш файл стилей не совсем подходит под это дело. В нём просто набор классов с эффектами, а вам нужно при наведении.

Можно сделать так:

Код: Выделить всё

.animate:hover img {
-webkit-backface-visibility: visible !important;
-webkit-animation-name: flip;
-moz-backface-visibility: visible !important;
-moz-animation-name: flip;
-o-backface-visibility: visible !important;
-o-animation-name: flip;
backface-visibility: visible !important;
animation-name: flip;

-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}

@-webkit-keyframes flip {

0% {

-webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);

-webkit-animation-timing-function: ease-out;

}
40% {

-webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);

-webkit-animation-timing-function: ease-out;

}

50% {

-webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);

-webkit-animation-timing-function: ease-in;

}

80% {

-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);

-webkit-animation-timing-function: ease-in;

}

100% {

-webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);

-webkit-animation-timing-function: ease-in;

}

}

@-moz-keyframes flip {
0% {
-moz-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-moz-animation-timing-function: ease-out;
}
40% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-moz-animation-timing-function: ease-out;
}
50% {
-moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-moz-animation-timing-function: ease-in;
}
80% {
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-moz-animation-timing-function: ease-in;
}
100% {
-moz-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-moz-animation-timing-function: ease-in;
}
}
@-o-keyframes flip {
0% {
-o-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
-o-animation-timing-function: ease-out;
}
40% {
-o-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
-o-animation-timing-function: ease-out;
}
50% {
-o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
-o-animation-timing-function: ease-in;
}
80% {
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
-o-animation-timing-function: ease-in;
}
100% {
-o-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
-o-animation-timing-function: ease-in;
}
}
@keyframes flip {
0% {
transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
animation-timing-function: ease-out;
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
animation-timing-function: ease-out;
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
animation-timing-function: ease-in;
}
80% {
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
animation-timing-function: ease-in;
}
100% {
transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
animation-timing-function: ease-in;
}
}


Не проверял.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
romaamor

Re: Вращяющиеся шары

romaamor 19 дек 2013, 19:47 Сообщение

CabinetAdmin » 29 окт 2013, 18:21 писал(а): У меня вообще форум стал сильно притормаживать

Сейчас, если помните раньше гугл адсенс давал одну точку, так щас все пять. Денюшка вроде больше пошла, но PR упало до 1 хотя я переленковку внутринею не делал. Вот и интерестно как они считают ( Гугл ) И почему при ТК возростаещем падает PR ? Наверно точно с внутриние перелинковки проблемы.

Аватара пользователя
maco

Re: Вращяющиеся шары

maco 20 дек 2013, 05:56 Сообщение

CabinetAdmin » Вчера, 19:05 писал(а):Не проверял.

Ок, спасибо, попробую, обязательно отпишусь :)

Аватара пользователя
maco

Re: Вращяющиеся шары

maco 20 дек 2013, 08:16 Сообщение

Да, все прекрасно работает ! :)

Спасибо.



Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость