Side Team Member Biography Resource

Use this team member biography resource to insert extended descriptions of your team members, with no need of dedicated pages or modal windows. Let the user meet your team and trust your company!

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.

JUNE 8, 2014

-Fixed bug with transition on Firefox