Разбор кода: премиум-шаблон MyEducation

Уважаемый гость! Для скачивания файлов с нашего портала необходимо авторизоваться:

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

Премиум-шаблон MyEducation

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

Блок "Категории"

Данное решение подойдет сайтам с большим количеством категорий. Как же реализовано данное решение?

Системный оператор $CATEGORIES$ обернут в div с классом .scrollcat и идентификатором #scrollcat . Добавляем свойство overflow: hidden и зададим фиксированную высоту (она должна быть меньше высоты списка категорий). Таким образом, в стили прописываем:

Код
.классблока{  
  height: 250px;  
  overflow: hidden;  
  }

Далее в качестве красивого и плавного скролла мы подключаем jQuery плагин NiceScroll. Перед закрывающим тегом
подключаем плагин к нашему блоку с категориями:

Код
<script>$(document).ready(function() {$("#scrollcat ").niceScroll({cursorcolor:"#282E3F",cursorwidth:"5px"});});  
  </script>

Чтобы сделать скролл в самый низ категорий, используем якорь. После системного оператора $CATEGORIES$ прописываем пустой див с идентификатором #scrollcat-bot. В итоге получаем следующий код блока:

Код
<div class="scrollcat" id="scrollcat ">  
  $CATEGORIES$  
  <div id="scrollcat-bot"></a>  
  </div>

Устанавливаем ссылку-якорь. В нужное место вставляем:

Код

Для плавного скролла используем следующий скрипт:

Код

На этом установка завершена.

Блок "Карусель пользователей"

Данное решение я использую и на uCozBook. Суть заключается в том, что информер выводит аватары зарегистрированных пользователей, а скрипт бегущей строки плавно их прокручивает слева на право.

Создаем информер со следующими параметрами:

Код информера::

Код

В место, где будет отображаться блок вставляем разметку:

Код

<div class="usersslide"><div class="string"><div id="marquee" class="usersslide-users">Код информера</div></div>
</div>

Перед закрывающим тегом
подключаем скрипт слайдера:

Код

И в конец таблицы стилей CSS прописываем стили:

Код

.string{
  width: 480px;
  height: 50px;
  line-height: 28px;
  }
  .usersslide-users{
  border-bottom: 1px solid #d4d4d4;
  padding: 10px 0px;
  position: relative;
  text-align: center;
  }
  .usersslide:before, .usersslide:after{
  content: "";
  width: 50px;
  height: 65px;
  position: absolute;
  z-index: 2;
  top: 0;
  }
  .usersslide:before{
  left: -1px;
  background: linear-gradient(to right,#ffffff 0,rgba(255,255,255,0) 100%);
  }
  .usersslide:after{
  right: -1px;
  background: linear-gradient(to right,rgba(255,255,255,0) 0,#ffffff 100%);
  }
  .usersslide-users img{
  width: 40px;
  border-radius: 100%;
  margin: 0px 4px;
  opacity: 0.5;
  transition: 0.3s;
  }
  .usersslide-users img:hover{
  opacity: 1;
  transition: 0.3s;
  }
  .allusersside{
  position: relative;}

Версия для слабовидящих

В шаблоне используется готовое решение версии для слабовидящих. Скачать и ознакомится с документацией можно на странице скрипта на uScripts.pro.

Добавил: Admin Просмотров: 1669 Категория: Разбор кода Комментарии

Порядок вывода комментариев:

Спам

iomaestro • 14:32, 12.02.2017

Для кого написана статья? Начинающему она не дает ровным счетом НИЧЕГО, потому, что не содержит СИСТЕМЫ обьяснений и потому не претендует на доступность. Какую информацию может дать подсказка: "Устанавливаем ссылку-якорь. В нужное(!) место вставляем" или "В место(!), где будет отображаться блок вставляем разметку". Опытному же пользователю данная информация не нужна, он уже давно знает, что там во что обернуто, (научился у тех, кто мог внятно обьяснить).а стало быть ваши благородные помыслы превращены вами же в напрасный труд. Буду благодарен, если вы дадите методически грамотный (внятный) урок. Мой совет, посадите рядом с собой начинающего и Вам станет ясно, ЧТО объяснять, какими терминами и в какой форме. Желательно пошагово. Спасибо за внимание, извините за замечание.