Sometimes a picture and a role are not enough to completely describe a team member; you need a more detailed description to make your team "real"! But this requires space... and you can gain it using CSS3 transformations. Just give a look at the smart solution found by Aquatilis: the description enters from the side, just like mobile application behaviour, with no need of page reload.
Creating the structure
We created a #cd-team
section containing our team members preview:
<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>
For each team member, we created a div.cd-member-bio
containing the extended description; we inserted them at the bottom of our content, before the body closing tag.
Adding style
The extended team member description is placed off the canvas by giving it a position:fixed;
, a right: 0;
and a translateX
equals to its width.
.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;
}
When the user clicks on one of the members' picture, the .slide-in class
is added to the div.cd-member-bio
using jQuery. This class modifies the translateX value to 0 (the smooth enter is achieved adding a transition to the translation property). The -webkit-overflow-scrolling: touch;
is used to smooth scrolling on touch devices (webkit browsers). It's recommended when you use the overflow property.
We gave an overflow-x: hidden;
to the body to prevent IE browser from showing a horizontal scrolling bar. We also gave it an overflow: hidden;
when the side member bio is visible, so that the out-of-focus content cannot scroll.
Events handling
We assigned a data-type value to each team member preview. When user clicks on one of the team members' picture, the .cd-member-bio
, which has class equal to that data-type, is shown.