最近浏览网站的时候发现国外的一个网站分类展示的效果挺不错,这里简单分享一下怎么实现
原网址在这里:http://minimalmonkey.com/
页面效果类似这样
html 内容:
<div class="section" id="section1">
<div class="panels">
<ul>
<li class="navy">
<div class="content">
<div class="fixed">
<h1>Transition and old browsers</h1>
<span class="excerpt"><p>Using CSS3 transitions are great. Supporting old browsers, not so great. How to work with both</p> </span>
</div>
<span class="small read">Read Article</span>
</div>
<div class="color"></div>
</li>
<li class="red">
<div class="content">
<div class="fixed">
<h1>Transition and old browsers</h1>
<span class="excerpt"><p>Using CSS3 transitions are great. Supporting old browsers, not so great. How to work with both</p> </span>
</div>
<span class="small read">Read Article</span>
</div>
<div class="color"></div>
</li>
<li class="lime">
<div class="content">
<div class="fixed">
<h1>Transition and old browsers</h1>
<span class="excerpt"><p>Using CSS3 transitions are great. Supporting old browsers, not so great. How to work with both</p> </span>
</div>
<span class="small read">Read Article</span>
</div>
<div class="color"></div>
</li>
</ul>
</div>
</div>
css 内容 (基本上都是靠css 实现):
#section1 .panels{
position: absolute;
height: 100%;
top: 0;
background-color: inherit;
bottom: 0;
display: block;
min-height: 460px;
position: relative;
-webkit-transition: opacity .3s;
transition: opacity .3s;
width: 100%;
z-index: 2;
}
#section1 ul{
height: 100%;
overflow: hidden;
display: flex;
min-height: 460px;
width: 1020px;
}
#section1 li{
width: 280px;
color: #fff;
position: relative;
/* -webkit-transition: background-color .35s,color .35s,margin .45s,-webkit-transform .5s;
transition: background-color .35s,color .35s,margin .45s,transform .5s; */
padding: 45px 30px;
cursor: pointer;
}
#section1 li .content {
-webkit-transition:opacity .45s;
transition:opacity .45s;
z-index:4;
position: relative;
}
#section1 li .fixed {
padding:44px 38px 68px
}
#section1 .fixed h1{
font-size: 45px;
line-height: 45px;
margin: 0;
}
#section1 .excerpt {
display: block;
font-size: 15px;
line-height: 23px;
opacity: .5;
margin-top: 28px;
-webkit-transition: opacity .35s;
transition: opacity .35s;
}
#section1 .read {
display: block;
font-size: 12px;
padding: 0 38px;
text-transform: uppercase;
top: 85vh;
display: block;
position: absolute;
}
#section1 .color{
background-color: inherit;
height: 100%;
left: 0;
position: absolute;
top: 0;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform .35s;
transition: transform .35s;
width: 100%;
}
/* acitve */
#section1 li:hover .excerpt{
opacity:1
}
#section1 .expand .color {
-webkit-transform:scaleX(1.15625)translate3d(0,0,0);
transform:scaleX(1.15625)translate3d(0,0,0);
z-index: 3;
}
#section1 ul.hover .navy{background: #082139;color: #666}
#section1 ul.hover .red{background: #5c1e1e;color: #666}
#section1 ul.hover .lime{background: #414f4d;color: #666}
/* 下载下main权限高于上面样式 */
#section1 li.navy,#section1 li.navy:hover{background: #16528e;color:#fff}
#section1 li.lime,#section1 li.lime:hover{background: #a2c5bf;color:#fff}
#section1 li.red,#section1 li.red:hover{background: #e54b4b;color:#fff}
js 内容:
$('#section1 li').hover(function(){
$(this).addClass("expand");
$(this).parent().addClass('hover');
},function(){
$('#section1 li').removeClass("expand");
$(this).parent().removeClass('hover');
})
这里主要有两部分要注意:
第一:color 节点
这里的color 节点,作用就是hover 的时候撑开宽度
<div class="color"></div>
主要的样式有以下几个:
background-color: inherit;
-webkit-transform:scaleX(1.15625)translate3d(0,0,0);
transform:scaleX(1.15625)translate3d(0,0,0);
第二:z-index 层级
.panels : z-index: 2;
.content : z-index:4;
.color : z-index: 3;
只要弄懂以上2点起到什么作用基本上就没什么大问题了。
对了,这里还要提一句,展示列在鼠标悬停的时候其他列会被置暗,我的习惯逻辑是布一层遮罩,开始我也是这么去操作的。但是完成的时候总会有一点卡顿,没有原网站上那么圆润,看了下代码,发现它是通过调整成较暗的背景颜色和字体来实现的。。。优秀,又学到一门手艺。
js部分
点击打开详情页这个过渡效果看上去也很nice,应该是通过 jquery+requireJS+backbone 来操作的,感觉代码质量还是可以的,借鉴意义挺高,有时间可以去研究一下。