JSFiddle - React, Tailwind, and code Playground
by Nick Hulea
HTML
<script src="http://unfold.no/js/libs/modernizr-1.6.min.js"></script>
<!-- People -->
<section id="people" class="main-section" data-scroll-align="center">
<div class="wrapper">
<article class="person egil person-1 bottom">
<div class="show-details">
<div class="background"></div> <span class="name">Egil Stene-Johansen</span>
</div>
<div class="details">
<h1>Egil Stene-Johansen</h1>
<dl> <dt>Title</dt>
<dd class="title">Managing Director/Account Director</dd> <dt>Email</dt>
<dd class="email"><a href="mailto:[email protected]">[email protected]</a>
</dd> <dt>Phone</dt>
<dd>+47 92862897</dd>
</dl>
<p>Egil has nearly 10 years of experience in digital communications, working
on large-scale conceptual projects for some of Norway’s major brands.</p>
</div>
</article>
</div>
</section>CSS
a {
font-style:italic;
text-decoration:none;
border-bottom:1px #55002a solid;
padding-bottom:0px;
color:#2d0016
}
#about .no-portfolio a:hover {
color:#fff;
border-bottom:1px #fff solid
}
#people {
position:relative;
height:620px;
margin-bottom:320px
}
.ie7 #people {
margin-bottom:330px
}
#people .wrapper {
position:absolute;
left:50%;
margin-left: -600px
}
#people .person {
position:absolute;
top:100px;
width:300px
}
#people .person.bottom {
top:220px
}
#people .person-1 {
left:90px
}
#people .person-2 {
left:210px
}
#people .person-3 {
left:330px
}
#people .person-4 {
left:450px
}
#people .person-5 {
left:570px
}
#people .person-6 {
left:690px
}
#people .person-7 {
left:810px
}
#people .person .show-details {
text-decoration:none
}
#people .person .show-details .background {
position:absolute;
top:0;
left:50%;
width:170px;
height:170px;
background:#000 url(http://unfold.no/images/people/egil.jpg) right bottom no-repeat;
z-index:2;
-webkit-transform:rotate(45deg);
-webkit-transform-origin:top left;
-moz-transform:rotate(45deg);
-moz-transform-origin:top left;
-ms-transform:rotate(45deg);
-ms-transform-origin:top left;
-o-transform:rotate(45deg);
-o-transform-origin:top left
}
.no-csstransforms #people .person .show-details .background {
left:40px;
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678, sizingMethod='auto expand')
}
#people .joachim .show-details .background {
background-image:url(/images/people/joachim.jpg)
}
#people .eric .show-details .background {
background-image:url(/images/people/eric.jpg)
}
#people .simen .show-details .background {
background-image:url(/images/people/simen.jpg)
}
#people .pablo .show-details...JavaScript
var people;
var settings = {
speed: 250,
easing: 'easeOutExpo'
};
var zIndex = 3;
App.People = function (sharing, navigation) {
people = this;
this.section = $('#people');
this.people = $('#people .person');
this.navigation = navigation;
this.sharing = sharing;
this.people.each(function () {
var person = $(this);
person.data('background', person.find('.background'))
person.data('details', person.find('.details'));
});
if (Modernizr.touch) {
this.people.click(function (e) {
e.preventDefault();
people.close($(this).siblings('.open'));
people.open($(this));
});
} else {
this.people.hover(function () {
people.open($(this));
}, function () {
people.close($(this));
});
}
}
App.People.prototype.open = function (items) {
people.setStyle(items, true);
}
App.People.prototype.close = function (items) {
people.setStyle(items, false);
}
App.People.prototype.setStyle = function (items, open) {
return items.each(function () {
var person = $(this);
if (open) {
person.css('zIndex', zIndex++);
person.addClass('open');
} else {
person.removeClass('open');
}
if (Modernizr.opacity) {
person.data('details').stop().fadeTo(settings.speed / 2, open ? 1 : 0);
person.stop().fadeTo(settings.speed, 1);
person.siblings().stop().fadeTo(settings.speed, open ? .3 : 1);
} else {
person.data('details')[open ? 'show' : 'hide']();
}
if (Modernizr.csstransforms) {
var size = open ? 340 : 170;
person.data('background').stop().animate({
width: size,
height: size,
top: open ? (person.hasClass('top') ? -180 : -140) : 0
}, settings.speed, settings.easing);
}
...