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.
We created a
#cd-team section containing our team members preview:
<section id="cd-team" class="cd-section">
<a href="#0" data-type="member-1">
<figure><!-- .... --></figure>
<div class="cd-member-info"><!-- .... --></div>
<li><!-- member 2 --></li>
<li><!-- .... --></li>
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.
The extended team member description is placed off the canvas by giving it a
right: 0; and a
translateX equals to its width.
/* smooth scrolling on mobile phones and tablets */
/* this how we move the author bio section off the canvas */
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.
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.