Автор

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

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


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

 

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

 

Иногда картинки и сферы деятельности недостаточно, чтобы полностью описать члена команды; Вам нужно более подробное описание, чтобы ваша команда «настоящая»! Но для этого требуется пространство ... и вы можете получить его с помощью преобразований 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

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


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

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

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


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

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


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

На просторах интернета можно не раз увидеть подобную версию галереи, но сегодня мы, все таки, решили уделить урок по созданию этой полноэкранной  галереи для сайта с помощью jQuery.  Идея заключается в том, чтобы отображать миниатюру текущего изображения в отдельном блоке с описанием. Большое изображение будет перемещаться вверх или вниз в зависимости от направления, которое мы выберем. Галерея так же будет реагировать на колесо мыши, клавиши вверх и вниз. Вот как все это выглядит..


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

Простой шаблон для демонстрации возможностей вашего приложения с помощью плавной 3d-анимации, основанной на CSS и jQuery.


105 Публикаций

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

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


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

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close