>
Всего Online : 1
Гости сайта : 1
Пользователей: 0

Кто Online :

Кто посетил нас сегодня :
Всего : 387
Новых за месяц: 5
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
Из них :
Пользователей 380
Проверенных: 6
Модераторов: 0
Админов: 1
Из них :
Парней: 318
Девушек: 69
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 новых тем на форуме.

VK Clear New Design (by 7uarts) для сайта ВКонтакте

Основной форум : Темы для сайтов | Дата : 29 Января 18

Заявка на бесплатные адаптации шаблонов под uCoz

Основной форум : Помощь сайтам созданных в системе uCoz | Дата : 24 Января 18

Тема BlackHead-Full Container для 7UARTS.

Основной форум : Темы для сайтов | Дата : 24 Января 18

Что такое Stylish и что тут создавать?

Основной форум : Темы для сайтов | Дата : 24 Января 18

Описание и правила форума

Основной форум : Темы для сайтов | Дата : 24 Января 18

Склонение числительных на uCoz

Основной форум : Уроки и решения для uCoz | Дата : 23 Декабря 17

Смена стилей сайта с запоминанием на Cookie

Основной форум : Прочее / Разное | Дата : 21 Декабря 17

Архив всех комментариев для uCoz

Основной форум : Уроки и решения для uCoz | Дата : 21 Декабря 17

1K вместо 1000

Основной форум : Уроки и решения для uCoz | Дата : 21 Декабря 17

Когда заходил пользователь на сайт (как Вконтакте) для uCoz

Основной форум : Уроки и решения для uCoz | Дата : 30 Ноября 17

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

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

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

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

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

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

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

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

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

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

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

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

Ого супер, форум вообще класс...

andruha061 / Developer - шаблон для блога / материалов для uCoz

уже нету) значит убрал) я в первый раз когда зашел...

Mopnex / Developer - шаблон для блога / материалов для uCoz

Я поставил подгрузку css вниз страницы, что позвол...

andruha061 / Developer - шаблон для блога / материалов для uCoz

рад что ты воспользоваться моей адаптацией) молоде...

Mopnex / Developer - шаблон для блога / материалов для uCoz

если кому интересно, что получилось у меня из шабл...

SVG слайдер изображений для uCoz

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


Параметр Значение
Дата публик. 03 Июня 17, Суббота, 03:14
Размер файла 600.4 Kb
Адапт. дизайн
Обновления Не производились
Просмотрен 422
Загружен 14

Простая, адаптивная карусель изображений. 
Ранее мы не раз экспериментировали с изображениями. Сегодня мы применим накопленный опыт и создадим адаптивный слайдер изображений. 

Структура HTML

Структура состоит из ненумерованного списка (ul.cd-slider), в который поместим слайды, и два дополнительных элемента списка (ul.cd-slider-navigation и ol.cd-slider-controls) для элементов навигации. 

Каждый элемент списка ul.cd-slider будет состоять из svg (для изменения области обрезки слайд-изображения) и элемента (идентификатор атрибута обрезаемого элемента ). 

<div> 
  <ul data-step1="M1402,800h-2V0.6c0-0.3,0-0.3,0-0.6h2v294V800z" data-step2="M1400,800H383L770.7,0.6c0.2-0.3,0.5-0.6,0.9-0.6H1400v294V800z" data-step3="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z" data-step4="M-2,800h2L0,0.6C0,0.3,0,0.3,0,0l-2,0v294V800z" data-step5="M0,800h1017L629.3,0.6c-0.2-0.3-0.5-0.6-0.9-0.6L0,0l0,294L0,800z" data-step6="M0,800h1400V0.6c0-0.2,0-0.3,0-0.6L0,0l0,294L0,800z"> 
  <li> 
  <div> 
  <svg viewBox="0 0 1400 800"> 
  <title>Aimated SVG</title> 
  <defs> 
  <clipPath id="cd-image-1"> 
  <path id="cd-changing-path-1" d="M1400,800H0V0.6C0,0.4,0,0.3,0,0h1400v294V800z"/> 
  </clipPath> 
  </defs> 

  <image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image> 
  </svg> 
  </div> <!-- .cd-svg-wrapper --> 
  </li> 

  <li> 
  <div> 
  <svg viewBox="0 0 1400 800"> 
  <!-- svg content here --> 
  </svg> 
  </div> <!-- .cd-svg-wrapper --> 
  </li> 

  <!-- other list items here --> 

  </ul> <!-- .cd-slider --> 

  <ul> 
  <li><a href="#0">Next</a></li> 
  <li><a href="#0">Prev</a></li> 
  </ul> <!-- .cd-slider-navigation --> 

  <ol> 
  <li><a href="#0"><em>Item 1</em></a></li> 
  <li><a href="#0"><em>Item 2</em></a></li> 
  <!-- other list items here --> 
  </ol> <!-- .cd-slider-controls --> 
</div> <!-- .cd-slider-wrapper -->


Стили

Структура слайдера предельно проста: к каждому слайду выставлен opacity: 0, позиция: absolute (top: 0 и left:0). Класс .visible будет добавляться к активному слайду, а .is-animating присваивается к тому элементу который анимируется в данный момент времени (z-index: 3, что поместит поверх элемента li.visible). 

.cd-slider > li { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  opacity: 0; 

.cd-slider > li.visible { 
  position: relative; 
  z-index: 2; 
  opacity: 1; 

.cd-slider > li.is-animating { 
  z-index: 3; 
  opacity: 1; 

.cd-slider .cd-svg-wrapper { 
  /* using padding Hack to fix bug on IE - svg height not properly calculated */ 
  height: 0; 
  padding-bottom: 57.15%; 

.cd-slider svg { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}


Обработка событий

Для реализации анимации мы задействуем атрибут 'd' элемента , входящего в . 

Далее определим значение атрибута data-stepn элемента .cd-slider, равный значению атрибута 'd' (чтобы было проще взаимодействовать через JavaScript). 

Сама анимация реализуется при вызове функции animate()

clipPath.attr('d', path1).animate({'d': path2}, duration, firstCustomMinaAnimation, function(){ 
  clipPath.animate({'d': path3}, duration, secondCustomMinaAnimation, function(){ 
  oldSlide.removeClass('visible'); 
  newSlide.addClass('visible').removeClass('is-animating'); 
  }); 
});


Вдобавок автор реализовал перелистывание изображений посредством нажатия клавиш, а также тач-жестов. 

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

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


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

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

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

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

Megogo Rating для DLE

Своеобразный хак Megogo Rating для DLE с вариантом выбора Понравилось и Не понравилось, где есть шкала и цифровое количество проголосовавших пользо...


Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

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


Загрузить материал (600.4 Kb)
Источник
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

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