Анимированная панель пользователя для uCoz

25 Ноября 18, Воскресенье, 11:33

Обновление от : andruha061

- Обновлена цветовая схема (частично, типо новый уровень)
- Исправлены ошибки, удален лишний код в стилях
- Новая система отображения личных сообщений
- Новая система окон
- Отчищены профили от мусора, в том числе и стены
- Все записи пользователей на стене как и комментарии к ним также удалены
- Чуток изменена страница с материалами
- Убран общий чат
- Новая система загрузки обложек в профили

PS. Нет, сайт не возрождён. Просто захожу и вижу что люди здесь есть, просмотры, посещения. Захотелось вернуться немного к этому всеми, вспомнить 7UARTS.

16 Февраля 18, Пятница, 01:05

Обновление от : andruha061

- Обновлен шаблон Torrent-Games для uCoz (Подробнее конце описания материала)
- Ссылка на шаблон : клик.

06 Февраля 18, Вторник, 17:47

Обновление от : andruha061

- Исправлен баг с личными сообщениями
- Вывод сообщений в Ajax-окне

04 Февраля 18, Воскресенье, 18:35

Обновление от : andruha061

- Обновлен вид персональных страниц для пользователей, у которых не установлена обложка.

04 Февраля 18, Воскресенье, 17:00

Обновление от : andruha061

- Обновлена система вывода комментариев на странице пользователя :

Теперь на странице пользователя отображается 30 последних комментариев которые он оставил. Если нужен полный список, то рядом есть кнопка для открытия страницы с полным списком комментариев. Плюс убрал показ комментариев через IFrame.

04 Февраля 18, Воскресенье, 15:02

Обновление от : andruha061

- Обновлена частично цветовая схема дизайна.
- Обновлены иконки в меню.
- Обновлена страница с материалами :
Если к материалу прикреплено больше 7 изображений, то будет использоваться прокрутка изображений в блоке.
- Обновлены табы на странице пользователя.
- Поставил эффект для BODY при загрузке страницы (не прелоадер)
- Обновлены цвет текста и заголовков.
- На странице пользователя во вкладке комментарии теперь можно перейти по ссылке к материалу где был оставлен комментарий.
- Может что-то еще...

03 Февраля 18, Суббота, 07:38

Обновление от : andruha061

- Частично улучшен дизайн сайта (это не точно).
- Шапка и подвал сайта на всю ширину страницы.
- Улучшено отображение блоков.
- Небольшие поправки в HTML-редакторе.
- Обновлен дизайн чата.
- Новая система вывода обновлений в окне.
- Частично обновлена персональная страница пользователя.
- Обновлен вид материалов для блога.
- Частично обновлена главная страница.
- Обновлено меню навигации.

09 Января 18, Вторник, 05:28

Обновление от : andruha061

- Оптимизация CSS и Java.
- Улучшение стабильности сайта.

08 Января 18, Понедельник, 21:29

Обновление от : andruha061

- Обновлена до конца мастерская сайта.

06 Января 18, Суббота, 12:29

Обновление от : andruha061

- Исправлены баги после обновления.
- Пофиксил отображение комментариев на странице пользователя.

01 Января 18, Понедельник, 01:27

Обновление от : andruha061

- Открытие сайта после огромного обновления.
- Подробнее в группе вк : https://vk.com/7uarts

Последних 10 новых материалов.

Последних 10 новых пользователей.

Последних 10 новых тем на форуме.

Последних 10 новых комментариев.

infernusbes / Новый шаблон Torrent-Games для uCoz

Отличная адаптация

magomedomarov9 / Современный качественный шаблон для uCoz - IPS4 Focus (Redesign)

Можешь перевод сделать на карту ?
после опл...

magomedomarov9 / Современный качественный шаблон для uCoz - IPS4 Focus (Redesign)

Щас свяжусь с автором!

tylerubro / Современный качественный шаблон для uCoz - IPS4 Focus (Redesign)

Здравствуйте. Как мне купить шаблон, что бы не свя...

magomedomarov9 / Minimal Soon - Страница технических работ

Материал полностью рабочий...
Возможно что-...

good04717 / Minimal Soon - Страница технических работ

Не работает, сделал все по инструкции и кроме карт...

andruha061 / Современный качественный шаблон для uCoz - IPS4 Focus (Redesign)

нет конечно, какая мне с этого выгода?
ты ж...

Lexa9090 / Современный качественный шаблон для uCoz - IPS4 Focus (Redesign)

А можно приобрести лишь часть кода? Например, мне ...

rubik2092 / Шаблон Libra для uCoz

Подскажите последовательность действий? как что и ...

andruha061 / Современный качественный шаблон для uCoz - IPS4 Focus (Redesign)

обновил ссылку, вернул старый укозовский домен : <...

Анимированная панель пользователя для uCoz

Дата и время публикации : 03 Июня 17 в 03:39 | Раздел : Меню для uCoz

Параметр	Значение
Дата публик.	03 Июня 17, Суббота, 03:39
Адапт. дизайн
Обновления	Не производились
Просмотрен	689

Описание материала
Комментарии к материалу 0

Довольно интересная реализация для меню профиля пользователя. Красивый эффект не оставляет без внимания. Данный материал предоставлен в HTML виде, поэтому вы его сможете адаптировать под любую CMS. Вы можете изменить цветовую гамму и назначить нужные вам иконки. Считаю что данный материал, будет очень полезен разработчикам и администраторам сайтов. Удивляйте своих пользователей чем-то необычным и данное решение профиля, заслуживает настоящего внимания.

Установка :

Вставляем в нужное место :

Теперь применим стили CSS :

.base {
z-index: 90;
position: fixed;
top: 0px;
left: 0px;
background-color: #FFFFFF;
width: 98px;
height: 98px;
-webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.05, 1);
transition: all 1s cubic-bezier(0.5, -0.75, 0.05, 1);
border-bottom-right-radius: 100%;
}

.base .menu {
z-index: 100;
background-color: #FFFFFF;
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
border-bottom-right-radius: 200px;
cursor: pointer;
-webkit-transition: all 1s cubic-bezier(0.5, -0.75, 0.05, 1), background-color 1s ease;
transition: all 1s cubic-bezier(0.5, -0.75, 0.05, 1), background-color 1s ease;
}

.base .menu .icon {
position: absolute;
width: 25px;
height: 25px;
top: 50%;
left: 50%;
-webkit-transform: translate(-100%, -100%);
transform: translate(-100%, -100%);
}

.base .menu .icon:before,
.base .menu .icon:after {
content: '';
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: top 0.5s ease 0.5s, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease;
transition: top 0.5s ease 0.5s, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease;
transition: top 0.5s ease 0.5s, transform 0.5s ease, background-color 0.75s ease 0.25s;
transition: top 0.5s ease 0.5s, transform 0.5s ease, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease;
}

.base .menu .icon .bar,
.base .menu .icon:before,
.base .menu .icon:after {
position: absolute;
height: 5px;
left: 0px;
right: 0px;
border-radius: 5px;
background-color: #21264B;
}

.base .menu .icon .bar {
-webkit-transition: opacity 0s linear 0.5s, background-color 0.75s ease 0.25s;
transition: opacity 0s linear 0.5s, background-color 0.75s ease 0.25s;
opacity: 1;
top: 10px;
}

.base .menu .icon:before {
top: 0px;
}

.base .menu .icon:after {
top: initial;
top: 20px;
}

.base .icons {
z-index: 98;
position: absolute;
top: 0px;
left: 0px;
}

.base .icons>* {
position: absolute;
font-size: 40px;
color: #21264B;
-webkit-transition: 0.3s cubic-bezier(0.5, -0.25, 0.05, 1);
transition: 0.3s cubic-bezier(0.5, -0.25, 0.05, 1);
}

.base .icons .fa-user {
top: 35px;
left: 0px;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}

.base .icons .fa-calendar-o {
top: 0px;
left: 0px;
color: #fff;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}

.base .icons .fa-tachometer {
top: 0px;
left: 35px;
}

.base .section {
z-index: 96;
position: absolute;
top: 0px;
left: 0px;
height: 0px;
width: 0px;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}

.base .section .cover1 {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}

.base .section .cover1,
.base .section .cover1 .cover2,
.base .section .cover1 .cover2 .content {
position: absolute;
width: 600px;
height: 600px;
}

.base .section .cover1,
.base .section .cover1 .cover2 {
top: 50%;
left: 50%;
-webkit-transform: translate(-100%, -100%) rotate(4deg);
transform: translate(-100%, -100%) rotate(4deg);
overflow: hidden;
pointer-events: none;
-webkit-transition: -webkit-transform 0.5s ease-in;
transition: -webkit-transform 0.5s ease-in;
transition: transform 0.5s ease-in;
transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
}

.base .section .cover1 .cover2 {
-webkit-transform: translate(50%, -50%) rotate(-8deg);
transform: translate(50%, -50%) rotate(-8deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}

.base .section .cover1 .cover2 .content {
width: 150px;
height: 150px;
border-radius: 100%;
background-color: #EE1B59;
top: 100%;
left: 0%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: background-color 0s, width 1.5s cubic-bezier(0.5, -0.5, 0.05, 1) 0s, height 1.5s cubic-bezier(0.5, -0.5, 0.05, 1) 0s;
transition: background-color 0s, width 1.5s cubic-bezier(0.5, -0.5, 0.05, 1) 0s, height 1.5s cubic-bezier(0.5, -0.5, 0.05, 1) 0s;
pointer-events: auto;
}

.base .section-static {
z-index: 94;
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-transition: width 1s cubic-bezier(0.5, -0.75, 0.05, 1), height 1s cubic-bezier(0.5, -0.75, 0.05, 1);
transition: width 1s cubic-bezier(0.5, -0.75, 0.05, 1), height 1s cubic-bezier(0.5, -0.75, 0.05, 1);
}

.base .section-static:hover {
background-color: #EAEAEA;
}

.base .section-static.top {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border-bottom-right-radius: 400px;
}

.base .section-static.bottom {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border-bottom-right-radius: 400px;
}

.base.close {
width: 300px;
height: 300px;
-webkit-transition: all 1.25s cubic-bezier(0.5, 0, 0.05, 8);
transition: all 1.25s cubic-bezier(0.5, 0, 0.05, 8);
}

.base.close .menu {
width: 150px;
height: 150px;
-webkit-transition: all 1s cubic-bezier(0.5, 0, 0.05, 1.75), background-color 1s ease;
transition: all 1s cubic-bezier(0.5, 0, 0.05, 1.75), background-color 1s ease;
background-color: #21264B;
}

.base.close .menu .icon .bar,
.base.close .menu .icon:before,
.base.close .menu .icon:after {
background-color: #FFFFFF;
}

.base.close .menu .icon .bar {
opacity: 0;
}

.base.close .menu .icon:before,
.base.close .menu .icon:after {
-webkit-transition: top 0.5s linear, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease 0.5s;
transition: top 0.5s linear, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease 0.5s;
transition: top 0.5s linear, transform 0.5s ease 0.5s, background-color 0.75s ease 0.25s;
transition: top 0.5s linear, transform 0.5s ease 0.5s, background-color 0.75s ease 0.25s, -webkit-transform 0.5s ease 0.5s;
}

.base.close .menu .icon:before {
top: 10px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.base.close .menu .icon:after {
top: 10px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.base.close .icons {
position: absolute;
top: 0px;
left: 0px;
}

.base.close .icons>* {
position: absolute;
font-size: 40px;
color: #21264B;
-webkit-transition: 0.3s cubic-bezier(0.5, 0, 0.05, 1.75) 0.7s;
transition: 0.3s cubic-bezier(0.5, 0, 0.05, 1.75) 0.7s;
pointer-events: none;
}

.base.close .icons .fa-user {
top: 35px;
left: 200px;
}

.base.close .icons .fa-calendar-o {
top: 141px;
left: 141px;
color: #fff;
-webkit-transition-delay: 0.65s;
transition-delay: 0.65s;
}

.base.close .icons .fa-tachometer {
top: 200px;
left: 35px;
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}

.base.close .section .cover1 {
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}

.base.close .section .cover1,
.base.close .section .cover1 .cover2,
.base.close .section .cover1 .cover2 .content {
position: absolute;
width: 600px;
height: 600px;
}

.base.close .section .cover1,
.base.close .section .cover1 .cover2 {
top: 50%;
left: 50%;
-webkit-transform: translate(-100%, -100%) rotate(16deg);
transform: translate(-100%, -100%) rotate(16deg);
overflow: hidden;
-webkit-transition: -webkit-transform 0.5s ease-in 0.5s;
transition: -webkit-transform 0.5s ease-in 0.5s;
transition: transform 0.5s ease-in 0.5s;
transition: transform 0.5s ease-in 0.5s, -webkit-transform 0.5s ease-in 0.5s;
}

.base.close .section .cover1 .cover2 {
-webkit-transform: translate(50%, -50%) rotate(-32deg);
transform: translate(50%, -50%) rotate(-32deg);
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}

.base.close .section .cover1 .cover2 .content {
border-radius: 100%;
background-color: #EE1B59;
top: 100%;
left: 0%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: background-color 0s, width 1.1s cubic-bezier(0.5, 0, 0.05, 1.75) 0.25s, height 1.1s cubic-bezier(0.5, 0, 0.05, 2) 0.25s;
transition: background-color 0s, width 1.1s cubic-bezier(0.5, 0, 0.05, 1.75) 0.25s, height 1.1s cubic-bezier(0.5, 0, 0.05, 2) 0.25s;
}

.base.close .section .cover1 .cover2 .content:hover {
background-color: #DD1350;
}

.base.close .section-static {
width: 300px;
height: 300px;
-webkit-transition: width 1.25s cubic-bezier(0.5, 0, 0.05, 2), height 1.25s cubic-bezier(0.5, 0, 0.05, 2);
transition: width 1.25s cubic-bezier(0.5, 0, 0.05, 2), height 1.25s cubic-bezier(0.5, 0, 0.05, 2);
}

Если у вас отсутствует библиотека Font Awesome, то подключаем :

И нам остается вызвать функцию вызова данной панели на JS :

$(".menu").click(function() {
$(this).parent().toggleClass("close");
});

На данный момент никто не оставил комментариев.

Оставить комментарий :

Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

Красивый прелоадер для сайта

Прекрасный разноцветный прелоадер для вашего сайта, не нагружающий сайт. Подойдет для сайта светлой цветовой гаммы, но не забываем что все цвета, ф...

Ccылка
BB-Code
HTML-код

25 Ноября 18, Воскресенье, 11:33

Обновление от : andruha061

16 Февраля 18, Пятница, 01:05

Обновление от : andruha061

06 Февраля 18, Вторник, 17:47

Обновление от : andruha061

04 Февраля 18, Воскресенье, 18:35

Обновление от : andruha061

04 Февраля 18, Воскресенье, 17:00

Обновление от : andruha061

04 Февраля 18, Воскресенье, 15:02

Обновление от : andruha061

03 Февраля 18, Суббота, 07:38

Обновление от : andruha061

09 Января 18, Вторник, 05:28

Обновление от : andruha061

08 Января 18, Понедельник, 21:29

Обновление от : andruha061

06 Января 18, Суббота, 12:29

Обновление от : andruha061

01 Января 18, Понедельник, 01:27

Обновление от : andruha061

Последних 10 новых материалов.

Последних 10 новых пользователей.

Последних 10 новых тем на форуме.

Последних 10 новых комментариев.

Анимированная панель пользователя для uCoz

Оставить комментарий :

Требуется войти в свой аккаунт.

Смотрите также :

Красивый прелоадер для сайта

Понравился материал? Поделись с ним в социальных сетях !