Автор

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

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


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

 

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

 

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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них только для развлечений, но некоторые могут быть уже сегодня использоваться на динамичных сайтах. Сегодня мы бы хотели привести пример реализации эффекта воды, который не оставит Вас равнодушным. Впечатляет, что так просто можно реализовать объемную графику прямо в окне браузера. Кроме этого данная технология стремительно набирает обороты и пользуется популярностью в веб-дизайнеров. Советуем Вам присмотреться к данной технологии.


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

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


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

Очередная выдвижная панель с любым необходимым для вас контентом! В примерах 3 варианта: фиксированная, выезжающая с лева и третья выезжающая с права. В исходных файлах есть все варианты СSS. Мы рассмотрим один с фиксированной кнопкой и панелью.


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

Это интро-страница, ориентированная на фоновое изображение полной ширины и жирное анимированное меню. И для браузеров, которые его поддерживают, хороший внешний вид, похожий на iOS, за навигацию.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close