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