info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  Страница 1 из 1
  [ 1 сообщение ]  Просмотры: 4196

Вращающаяся аватара
  Версия для печати Пред. тема | След. тема 
Автор Сообщение
Не в сети
 (Андрей)  
 Вращающаяся аватара
Администратор
Аватара пользователя

Стаж: 9 лет 4 месяца 20 дней
Сообщения: 1235
Откуда: здешние мы

Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя

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

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


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

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'; ***
трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
аватар,avatar,профиль,phpbb3
Показать сообщения за:  Поле сортировки  
Ответить на тему  Страница 1 из 1
  [ 1 сообщение ] 

Кто сейчас на сайте:
Всего посетителей: 0, из них зарегистрированных: 0, скрытых: 0 и гостей: 0 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

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



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

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



cron

Текущее время: 12 фев 2025, 09:47

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид