Тема на vbulletin.org: http://www.vbulletin.org/forum/showthread.php?t=286317

Суть: при наведении курсора на автор, автор крутится/переворачивается на 300° или другой вариант - аватор с эффектом зума.

vB Version: 4.2.0
Mod Version:1.00,
Coder/Designer: ChiNa-Man


1. Идем в Стили и Шаблоны/Выбираем редактируемый стиль/Ищем шаблон additional.css/добавляем ниже:

PHP Code:

.myavatar:hover { 
 transition: all 3s ease; 
-webkit-transition: all 3s ease; 
-moz-transition: all 3s ease; transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-webkit-transform:rotate(360deg); position:relative;
} 


2. Идем в Стили и Шаблоны/Выбираем редактируемый стиль/Ищем шаблон postbit_legacy/ в нем ищем:

PHP Code:

 <img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" /> 


И заменяем на:

PHP Code:

<div class="myavatar"><img src="{vb:raw post.avatarurl}" alt="{vb:rawphrase xs_avatar, {vb:raw post.username}}" title="{vb:rawphrase xs_avatar, {vb:raw post.username}}" /></div> 


------
Если желаем установить эффект увеличения автора, возвращаемся в additional.css/заменяем недавно добавленный код на:

PHP Code:

.myavatar:hover { 
opacity: 1; filter: alpha(opacity=100);
transition: all 2s ease; 
-webkit-transition: all 2s ease; 
-moz-transition: all 2s ease;
transform:rotate(0deg); 
-moz-transform:rotate(0deg); 
-webkit-transform:rotate(0deg);
transform: scale(1.5); 
-webkit-transform: scale(1.5); 
-moz-transform: scale(1.5);
position:relative;
} 


Оффтоп

Все работает, проверено на себе

При наведении на аватар (когда крутиться) все аватары ниже у пользователей вздрагивают. В чем причина? Как исправить?

Оффтоп

Originally Posted by insideja

все аватары ниже у пользователей вздрагивают

им страшно

Originally Posted by insideja

Как исправить?

снести скрипт

А если по серьезней? как-то реально же поправить.

@insideja, дайте ссылку на сайт, посмотреть как у вас аватары дрожат

Originally Posted by ikopylov

@insideja, дайте ссылку на сайт, посмотреть как у вас аватары дрожат

Не дрожат, а вздергиваются все аватары, что находятся ниже того, на который я навожу курсор. Когда наводишься курсором на аватар, все аватары, что ниже дернулись (поднялись на 1мм выше), а когда круг 360 градусов прошел, то спалзают на своё место (1мм вниз - на своё место). Можешь затестить это сам, увидишь.

Форум в локалке.

Originally Posted by ikopylov

дайте ссылку на сайт, посмотреть как у вас аватары дрожат

я могу дать ссылку на видео, где вся четверка трясется от страха

Оффтоп

Originally Posted by insideja

Не дрожат, а вздергиваются

их подсекли и теперь вываживают

liner добавил 20.12.2013 в 23:30
Оффтоп

Originally Posted by insideja

а когда круг 360 градусов прошел, то спалзают на своё место

круг - это и есть 360 градусов.
Передайте привет человеку, который Вас научил слову

спалзают

Супер

установил эффект увеличения автора очень понравился...спасибо скожу за труд...и сильно не пинайте кнопку СПС не нашол но положительный оценку тыкал...)))))