Блок для пользовательской биографии
Вы можете воспользоваться данной HTML/CSS/jQuery наработкой для того чтобы интересным образом разместить какие-то подробные данные о ваших сотрудниках или пользователях без использования модальных окон.
В некоторых случаях было бы неплохо как-то оригинально отобразить информацию о ваших сотрудниках или пользователях. Для этого необходимо выделить специальное пространство на странице, которое как известно ограничено. Предлагаем вам познакомиться с решением Aquatilis: описание плавно выплывает с боковой стороны без необходимости перезагрузки страницы.
Создание структуре
Мы создадим секцию a #cd-team
для хранения информации о работниках фирмы:
<section id="cd-team" class="cd-section"> <div class="cd-container"> <h2>Our team</h2> <ul> <li> <a href="#0" data-type="member-1"> <figure><!-- .... --></figure> <div class="cd-member-info"><!-- .... --></div> </a> </li> <li><!-- member 2 --></li> <li><!-- .... --></li> </ul> </div> </section>
Для каждого работника был создан отдельный блок div.cd-member-bio
с подробной информацией.
Стили
Блокам с информацией о работниках фирм будут присвоены свойства: position:fixed;
, right: 0;
и translateX
, равный ширине элемента.
.cd-member-bio { position: fixed; top: 0; right: 0; width: 270px; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(270px); transition-property: transform; transition-duration: 0.3s; }
При клике по изображению работника, элементу div.cd-member-bio
будет присвоен класс .slide-in
средствами jQuery. Данный файл выставляет опцию translateX
в 0. Запись -webkit-overflow-scrolling: touch;
необходима для адекватной работы на тач-устройствах.
Свойство overflow-x: hidden;
необходимо для IE, точнее для пресечения отображения горизонтальной полосы прокрутки. Так же задаём overflow: hidden;
при отображении панели биографии.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/side-team-member-bio/
Перевел: Станислав Протасевич
Урок создан: 15 Октября 2015
Просмотров: 8544
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.