Наткнулся на интирестный сайт - https://daneden.me/animate/. Как реализованны вращающиеся шары вокруг названия ?
Комментарии: 36

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

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

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

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

<a href="http://satray.ru/index.php">SatRay.ru</a>
Все на месте но вращающегося не чего не наблюдал.
Кеш чистил.
  • 0

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

Поставь сейчас, посмотрим.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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>
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

CabinetAdmin » 4 минуты назад писал(а):Поставь не после, а вместо:
Тоже ставил. Нету шариков.
  • 0

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

Сейчас вижу шарики.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

CabinetAdmin » 1 минуту назад писал(а):Сейчас вижу шарики.
Да. Заработало. :) Вот если бы вместо шариков картинки поставить...... :milo:
  • 0

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

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

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

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

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

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

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

background: url("/images.gif") no-repeat;
romaamor писал(а):Перестало после этого работать верхнее меню.
Выпадающий список, да, есть такое. Так и будет. У меня вообще форум стал сильно притормаживать :(
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

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

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

Добрый день.
Хотелось бы из той же библиотеки поставить эффект flip, что бы вращался аватар (как в этой теме http://cabinetadmina.ru/viewtopic.php?p=64802#p64802) при наведении на него мышью.
Вот код css.
animate.rar
762 байт 263 скачивания
Вопрос, правильно ли я подключаю библиотеку? таким способом :<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}">
Тока не выходит ни чего :) , правильно ли я делал, видимо надо добавить эффект (класс) "При наведении на аватар мышкой".
Не подскажите как ? :)
  • 0

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;
}
}
Не проверял.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

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

CabinetAdmin » 29 окт 2013, 18:21 писал(а): У меня вообще форум стал сильно притормаживать
Сейчас, если помните раньше гугл адсенс давал одну точку, так щас все пять. Денюшка вроде больше пошла, но PR упало до 1 хотя я переленковку внутринею не делал. Вот и интерестно как они считают ( Гугл ) И почему при ТК возростаещем падает PR ? Наверно точно с внутриние перелинковки проблемы.
  • 0

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

CabinetAdmin » Вчера, 19:05 писал(а):Не проверял.
Ок, спасибо, попробую, обязательно отпишусь :)
  • 0

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

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

Спасибо.
  • 0