Подробное описание сотрудника команды

Подробное описание сотрудника команды


Используйте данный урок для биографии выбранного сотрудника, без необходимости выделенных страниц или модальных окон.Пусть пользователь встретит вашу команду и доверяет вашей компании!

 

ДЕМО
ИСХОДНИКИ

 

Иногда картинки и сферы деятельности недостаточно, чтобы полностью описать члена команды; Вам нужно более подробное описание, чтобы ваша команда «настоящая»! Но для этого требуется пространство ... и вы можете получить его с помощью преобразований CSS3. Просто взгляните на интеллектуальное решение: описание входит со стороны, как и поведение мобильного приложения, без необходимости перезагрузки страницы.

 

Создание структуры

Мы создали раздел # 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;
	/* smooth scrolling on mobile phones and tablets */
	-webkit-overflow-scrolling: touch;
	/* this how we move the author bio section off the canvas */
	transform: translateX(270px);
	transition-property: transform;
	transition-duration: 0.3s;
}

Когда пользователь нажимает на изображение одного из участников, .slide-in class добавляется в div.cd-member-bio, используя jQuery. Этот класс изменяет значение translateX на 0 (достигается плавный ввод, добавляя переход к свойству перевода). -webkit-overflow-scrolling: touch; Используется для сглаживания прокрутки на сенсорных устройствах (веб-браузеры). Рекомендуется использовать свойство переполнения.

Мы дали overflow-x: hidden; К телу, чтобы браузер IE не показывал горизонтальную полосу прокрутки. Мы также дали ему overflow: hidden; Когда видны боковые элементы биографии, так что содержимое вне фокуса не может прокручиваться.

 

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

Мы назначили значение типа данных для каждого члена команды. Когда пользователь нажимает на изображение одного из членов команды, отображается .cd-member-bio, который имеет класс, равный этому типу данных.

 

Вот и всё!


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

Подробное описание сотрудника команды

В наше время почти на каждом сайте можно увидеть красивые кнопки на сайте, с использованием css. В данном уроке мы рассмотрим подборку замечательных анимированных кнопок для сайта с помощью эффектов css. Возможно вы уже не раз встречали подобные кнопки в интернете, но мы не смогли пройти возле них мимо, и решили рассказать нашим пользователям о них. Идея заключается в создании анимированных ссылок с разными стилями, hover-эффектами и прочими. Также мы будем использовать сторонние шрифты с репозитория google.


Подробное описание сотрудника команды

Параллакс это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Параллакс используется в геодезии и астрономии для измерения расстояния до удалённых объектов. На явлении параллакса основано бинокулярное зрение. Но также параллакс активно используется дизайнерами для разработки необычных эффектов как в повседневной жизни, так и в веб-дизайне.


Подробное описание сотрудника команды

Параллакс достаточно привлекательная технология для веб-разработчиков, которая поможет привлечь внимание посетителя. В данном уроке мы рассмотрим процесс создания такого замечательного полноэкранного слайдера с эффектом параллакса и возможностью быстрой навигации. По умолчанию у нас будет четыре слайда с нижней навигацией в виде точек, при наведении и перелистывании которых будет происходить плавная анимация, кроме этого будет слайдер оснащен боковыми кнопками, при наведении на края слайдера будут темнеть.


Подробное описание сотрудника команды

В одном из моих первых заказов была необходимость создания интерактивных подсказок, которые появлялись постепенно на заданном изображении и должны были служить подписями для объектов на изображении. На то время мне это как представлялось, но все же я выполнил поставленную задачу. Действительно, такой вариант подсказок весьма эффектно смотрится. Как вы уже догадались, в сегодняшнем уроке мы рассмотрим как создать достаточно простые интерактивные подсказки с постепенным появлением и небольшой анимацией.


Раскрутка в соцсетях

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


Перейти в Блог