Шаблон для сайта - Sliding Panels Template, выполненный в виде выдвигающихся панелей

Шаблон для сайта - Sliding Panels Template, выполненный в виде выдвигающихся панелей

Шаблон для сайта-портфолио Sliding Panels Template – это любопытная разработка, сделанная в стиле выезжающих панелей. За основу, разработчики взяли идею перемещения блоков содержимого, как способ перехода от главной, на другие страницы сайта.

HTML структура этого шаблона, заключается в использовании двух неупорядоченных списков. Один из них 'ul.cd-projects-previews' – он отвечает за изображения-превью проекта. Второй 'ul.cd-projects', показывающий детали проекта. За навигацию между ними отвечает 'nav.cd-primary-nav'.

На маленьких экранах, превью каждого проекта имеет ширину, одинаковую с шириной и высотой окна просмотра. Изображение для превью, устанавливается как фон дочернего элемента '<a>'.

После того, как посетитель выбирает проект, класс '. selected' добавляется к соответствующему '.cd-projects > li', в то же время, класс '.slide-out' добавляется к превью проекта (в случайном порядке, с небольшой задержкой, для создания эффекта слайда).

В качестве обработчика событий, здесь выступает JQuery. Он определяет момент нажатия на элементы '.cd-nav-trigger' и превью проекта. Когда пользователь выбирает проект или открывает меню навигации, функция slideToggleProjects () обеспечивает слайдинг проектов. Функция makeUniqueRandom () используется в определении случайных чисел (от 1 до 4) для установки порядка появления проектов.

Демо: 

https://codyhouse.co/demo/sliding-panels-template/index.html

Скачать:

Для загрузки файла необходима регистрация

Добавить комментарий

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent

Комментариев 0