directors——toolofna

效果

分析

这是toolofna中我最喜欢的页面，简单却又不失酷感。同时我也觉得越简洁精致的东西其实越不好想，越不好做。我试着摸索了一下大神的思路，然后通过自己的思考完成了这个页面

思路

1、页面应该有5个div模块，左一个，中间的线是一个，右一个，然后左右的内容模块各一个

2、一开始的闪电应该是有两个div，一个固定了高度，另一个高度是变化的

3、背景色为黑色，左右两个div一开始宽度为0，然后闪电结束后宽度变大，向中间靠拢，两个div都是倾斜的

4、当鼠标移到内容区域时，会产生以下几个变化

5、多个动画效果一起叠加，产生了一种顺滑自然的交互体验

源码

html

<div id="directors">
    <div class="left"></div>
    <div class="line">
        <div class="line-in"></div>
    </div>
    <div class="right"></div>
    <div class="left-content">
        <span class="redblock"></span>
        <h1>LIVE</h1>
        <h1>ACTION</h1>
        <p>From funny to dramatic. From docu-style to cinematic. From Oscars to Lions. </p>
        <span class="blackblock"></span>
    </div>
    <div class="right-content">
        <span class="redblock"></span>
        <h1>INTER-</h1>
        <h1>ACTIVE</h1>
        <p>World-class digital creatives and technologists who specialize in the interactive space.</p>
        <span class="blackblock"></span>
    </div>
</div>

css

/**
directors
 */
#directors .line{
    width: 10px;
    height: 100%;
    margin: 0 auto;
    background-color: #000;
    transform: skew(-5deg);
}
#directors .line-in{
    width: 100%;
    height: 0;
    background-color: #fff;
    transition: height .5s,background-color .5s 1s;
}
#directors .left,#directors .right{
    position: absolute;
    top:0;
    width: 0;
    height: 100%;
    transform: skew(-5deg);
    z-index: 1;
    background: url("../images/bg-pattern.gif") repeat;
    transition: width .5s .5s;

}
#directors .left{
    left: -78px;
}
#directors .right{
    right:-78px;
}
#directors .left-content,#directors .right-content{
    position: absolute;
    top: 100px;
    width: 400px;
    height: 400px;
    font-weight: bold;
    font-size: 60px;
    z-index: 10;
    cursor: pointer;
    display: none;
}
#directors .left-content{
    left: 120px;
    text-align: left;
    transition: color 1s,left .5s;

}
#directors .right-content{
    right: 120px;
    text-align: right;
    transition: color 1s,right .5s;

}
#directors .left-content:hover .left{
    width: 0;
}
#directors .redblock{
    display: inline-block;
    background-color: #e74c4c;
    width: 17px;
    height: 4px;
    margin-bottom: 60px;
    transition: width .5s;
}
#directors h1{
    line-height: 110px;
    font-size: 90px;
    font-family: "TrumpGothicEastBold", Arial, Helvetica, sans-serif;
    letter-spacing: 4px;
}
#directors p{
    margin: 30px 0 20px 0;
    font-size: 14px;
    line-height: 24px;
    color: #666;
    font-family: "LetterGothicStd-Slanted", "Lucida Console", Monaco, monospace;
}
#directors .blackblock{
    display: inline-block;
    background-color: #2f2f2f;
    width: 143px;
    height: 9px;
    margin-top: 30px;
    transition: width .5s, background-color .5s;
}

JavaScript

     /**
     * directors
     */
    $(".line-in").css({"height": "100%", "background-color": "#000"});
    $(".left").css("width", "55%");
    $(".right").css("width", "55%");
    setTimeout(function () {
        $(".left-content").css({"display":"block"});
        $(".right-content").css({"display":"block"});
    },700);
    setTimeout(function () {
        $(".left-content").on("mouseover", function () {
            $(".left").css({"width": "0", "transition": "width .5s"});
            $(".right").css({"width": "50%", "transition": "width .2s"});
            $(this).css({"color":"#ffffff","left":"150px"});
            $(".left-content .redblock").css("width","50px");
            $(".left-content .blackblock").css({"width":"200px","background-color":"#e74c4c"});
        });
        $(".left-content").on("mouseout", function () {
            $(".left").css({"width": "55%", "transition": "width .2s"});
            $(".right").css({"width": "55%", "transition": "width .2s"});
            $(this).css({"color":"#000","left":"120px"});
            $(".left-content .redblock").css("width","17px");
            $(".left-content .blackblock").css({"width":"143px","background-color":"#2f2f2f"});
        });
        $(".right-content").on("mouseover", function () {
            $(".right").css({"width": "0", "transition": "width .5s"});
            $(".left").css({"width": "50%", "transition": "width .2s"});
            $(this).css({"color":"#ffffff","right":"150px"});
            $(".right-content .redblock").css("width","50px");
            $(".right-content .blackblock").css({"width":"200px","background-color":"#e74c4c"});
        });
        $(".right-content").on("mouseout", function () {
            $(".right").css({"width": "55%", "transition": "width .2s"});
            $(".left").css({"width": "55%", "transition": "width .2s"});
            $(this).css({"color":"#000","right":"120px"});
            $(".right-content .redblock").css("width","17px");
            $(".right-content .blackblock").css({"width":"143px","background-color":"#2f2f2f"});
        });
    },1000);

总结

有时候酷炫的效果并不需要什么复杂的计算，只需要一些天马行空的想象力。前端虽然入门快，成长迅速，但是相比后台的从难到易，我感觉前端是从易到难。模仿着做几个效果其实很简单，但是理解背后的原理，钻研基础的深度，其实对自己能力的提升很有帮助。

toolofna

http://toolofna.com/#!/directors