сайт на данный момент является архивом информации по форуму phpbb 3.0. объяснения и помощь больше не предоставляются. старый сайт

Белк на PhpBB 3.0.14

информация по этому форуму. bbcode, моды и прочее, проверенное Белком. (перенос данных продолжается...)

Сегодня на конференции было 52 посетителей :: 1 зарегистрированный, 0 скрытых, 1 бот и 50 гостей (основано на активности посетителей за последние 24 часа)




 Страница 1 из 1
  [ 1 сообщение ] 
Вращающаяся аватара
  Версия для печати Пред. тема | След. тема 
Автор Сообщение
Не в сети
Belk  (Андрей)
17 янв 2026, 13:49 Вращающаяся аватара
Администратор
Аватара пользователя

Стаж: 5 месяцев 20 дней
Сообщения: 228
Откуда: здешние мы

Стиль сайта: subsilver2
Настоящее имя: Андрей

"Вращение" аватарки пользователя в минипрофиле темы

как это выглядит - можете посмотреть у меня в шапке сайта - наведите мышку на Змеюку Горыныча ):


Кого заинтересовало, смотрим сюда:

subsilver2
Открыть styles/subsilver2/theme/stylesheet.css
Добавить в конец файла

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

/*------------- вращающаяся аватара ---------------*/

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

.animated.flip {
   -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;
}
.animated {
   -webkit-animation-duration: 1s;
      -moz-animation-duration: 1s;
        -o-animation-duration: 1s;
           animation-duration: 1s;
   -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
        -o-animation-fill-mode: both;
           animation-fill-mode: both;
}

.animated.hinge {
   -webkit-animation-duration: 2s;
      -moz-animation-duration: 2s;
        -o-animation-duration: 2s;
           animation-duration: 2s;
}


Открыть styles/subsilver2/template/viewtopic_body.html
Найти

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

<!-- IF postrow.POSTER_AVATAR -->
            <tr>
               <td>{postrow.POSTER_AVATAR}</td>
            </tr>
         <!-- ENDIF -->


Заменить на

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

<!-- IF postrow.POSTER_AVATAR -->
                <tr onMouseOver="this.className='flip animated';" onmouseout="this.className='';">
                   <td align="center"><a href="{postrow.U_POST_AUTHOR}" title="Посмотреть профиль">{postrow.POSTER_AVATAR}</a></td>
                </tr>
            <!-- ENDIF -->


prosilver
Открыть common.css
В конец файла добавить

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

/*------------- вращающаяся аватара ---------------*/
 
@-webkit-keyframes flip {
   0% {
      -webkit-transform: translateZ(0) rotateY(0) scale(1);
      -webkit-animation-timing-function: ease-out;
   }
   40% {
      -webkit-transform: translateZ(150px) rotateY(170deg) scale(1);
      -webkit-animation-timing-function: ease-out;
   }
   50% {
      -webkit-transform: translateZ(150px) rotateY(190deg) scale(1);
      -webkit-animation-timing-function: ease-in;
   }
   80% {
      -webkit-transform: translateZ(0) rotateY(360deg) scale(.95);
      -webkit-animation-timing-function: ease-in;
   }
   100% {
      -webkit-transform: translateZ(0) rotateY(360deg) scale(1);
      -webkit-animation-timing-function: ease-in;
   }
}
@-moz-keyframes flip {
   0% {
      -moz-transform: translateZ(0) rotateY(0) scale(1);
      -moz-animation-timing-function: ease-out;
   }
   40% {
      -moz-transform: translateZ(150px) rotateY(170deg) scale(1);
      -moz-animation-timing-function: ease-out;
   }
   50% {
      -moz-transform: translateZ(150px) rotateY(190deg) scale(1);
      -moz-animation-timing-function: ease-in;
   }
   80% {
      -moz-transform: translateZ(0) rotateY(360deg) scale(.95);
      -moz-animation-timing-function: ease-in;
   }
   100% {
      -moz-transform: translateZ(0) rotateY(360deg) scale(1);
      -moz-animation-timing-function: ease-in;
   }
}
@-o-keyframes flip {
   0% {
      -o-transform: translateZ(0) rotateY(0) scale(1);
      -o-animation-timing-function: ease-out;
   }
   40% {
      -o-transform: translateZ(150px) rotateY(170deg) scale(1);
      -o-animation-timing-function: ease-out;
   }
   50% {
      -o-transform: translateZ(150px) rotateY(190deg) scale(1);
      -o-animation-timing-function: ease-in;
   }
   80% {
      -o-transform: translateZ(0) rotateY(360deg) scale(.95);
      -o-animation-timing-function: ease-in;
   }
   100% {
      -o-transform: translateZ(0) rotateY(360deg) scale(1);
      -o-animation-timing-function: ease-in;
   }
}
@keyframes flip {
   0% {
      transform: translateZ(0) rotateY(0) scale(1);
      animation-timing-function: ease-out;
   }
   40% {
      transform: translateZ(150px) rotateY(170deg) scale(1);
      animation-timing-function: ease-out;
   }
   50% {
      transform: translateZ(150px) rotateY(190deg) scale(1);
      animation-timing-function: ease-in;
   }
   80% {
      transform: translateZ(0) rotateY(360deg) scale(.95);
      animation-timing-function: ease-in;
   }
   100% {
      transform: translateZ(0) rotateY(360deg) scale(1);
      animation-timing-function: ease-in;
   }
}
 
.animated.flip {
   -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;
}
.animated {
   -webkit-animation-duration: 1s;
      -moz-animation-duration: 1s;
        -o-animation-duration: 1s;
           animation-duration: 1s;
   -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
        -o-animation-fill-mode: both;
           animation-fill-mode: both;
}
 
.animated.hinge {
   -webkit-animation-duration: 2s;
      -moz-animation-duration: 2s;
        -o-animation-duration: 2s;
           animation-duration: 2s;
}



Открыть template/viewtopic_body.html
Найти вывод аватарки (примерно так):

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

<!-- IF postrow.POSTER_AVATAR -->
               <!-- IF postrow.U_POST_AUTHOR --><a href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
            <!-- ENDIF -->


Заменить найденное на

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

<!-- IF postrow.POSTER_AVATAR -->
               <!-- IF postrow.U_POST_AUTHOR --><a onMouseOver="this.className='flip animated';" onmouseout="this.className='';" href="{postrow.U_POST_AUTHOR}">{postrow.POSTER_AVATAR}</a><!-- ELSE -->{postrow.POSTER_AVATAR}<!-- ENDIF --><br />
            <!-- ENDIF -->


я написал "примерно так" потому что у вас вывод аватара может выглядеть и по-другому.


Почистить кэши и любоваться изменениями.

Кого заинтересовали "красивости" и хочет присмотреть что-либо иное для себя - посмотрите здесь:

animate.css

вставлять просто по аналогии - добавить "КРАСИВОСТЬ" в стиль и поменять название в ссылке

<a onMouseOver="this.className='flip animated'; ***
трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
Показать сообщения за:  Поле сортировки  
Ответить на тему  Страница 1 из 1
  [ 1 сообщение ] 

Кто сейчас на конференции:
Всего посетителей: 2, из них зарегистрированных: 0, скрытых: 0 и гостей: 2 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (63) здесь было 23 май 2026, 12:35

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

Список форумов » Форум phpbb 3.0 » Модификации

Часовой пояс: UTC + 3 часа



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  

cron

Текущее время: 26 июн 2026, 20:55

Создано на основе phpBB® Forum Software © phpBB Group
Русская поддержка phpBB.