Разбор кода: премиум-шаблон 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>

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

Код
<a href="#scrollcat-bot"><i class="fa fa-angle-down" aria-hidden="true"></i></a>

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

Код
<script>$(document).ready(function() {$('a[href^="#"]').click(function(){var el = $(this).attr('href');$('#scrollcat ').animate({scrollTop: $(el).offset().top}, 1000);return false;});});  
  </script>

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


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


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


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



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

Код
<a alt="Пользователь $USERNAME$" href="$PROFILE_URL$"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$" alt="Пользователь $USERNAME$"><?else?><img src="http://ucozbook.ru/img/noava.jpg" alt="Пользователь $USERNAME$"><?endif?></a>

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

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

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

Код
<script>$(function() {var marquee = $("#marquee");marquee.css({"overflow": "hidden", "width": "100%"});marquee.wrapInner("<span>");marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" });marquee.append(marquee.find("span").clone());marquee.wrapInner("<div>");marquee.find("div").css("width", "200%");var reset = function() {$(this).css("margin-left", "0%");$(this).animate({ "margin-left": "-100%" }, 25000, 'linear', reset);};reset.call(marquee.find("div"));});  
  </script>

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