follow me

2017-03-10

简介

随着CSS3的出现，许多功能都可以直接通过样式表实现，辅助简单的js操作，各种响应式组件营运而生。
‘follow me’组件，即屏幕中通过鼠标移动，该组件即可跟随做出相应的动作，目前该需求应用不是很广泛，但未来硬件的提高，交互性强的组件肯定应用越来越广泛。

html部分

html部分非常简单

<div class="moving-zone">
    <div class="popup">
        <div class="popup-content">
            <div class="popup-text">
                 所谓<b>同性相吸</b><br/>
                 所谓<b>异性相斥</b>
            </div>
        </div>
    </div>
</div>

CSS部分

html, body { height: 100%; }
       body {
           margin: 0;
           background: radial-gradient(#666, #222);
           overflow: hidden;
       }
       .moving-zone {
           position: absolute;
           top:50%; left:50%;
           width:300px; height:120px;
           margin: -60px 0 0 -150px;/*居中操作，不解释*/
           perspective: 800px; /*基础位置属性现在3d效果用的越来越多了*/
       }
       .popup {
           position: absolute;
           width:300px;
           padding: 10px;
           box-sizing: border-box;
           border-radius: 20px 0 20px 0;
           cursor: pointer;
           transform-style: preserve-3d;
           /*背景颜色*/
           background: -webkit-linear-gradient(top left, #6d6d6d 50%, #ff3d6b 50%);
           background: -moz-linear-gradient(top left, #6d6d6d 50%, #ff3d6b 50%);
           background: -ms-linear-gradient(top left, #6d6d6d 50%, #ff3d6b 50%);
           background: -o-linear-gradient(top left, #6d6d6d 50%, #ff3d6b 50%);
           background: linear-gradient(top left, #6d6d6d 50%, #ff3d6b 50%);
       }
       /*阴影部分，更具3d效果*/
       .popup:before {
           content: '';
           position: absolute;
           left:5%; top:5%;
           width:90%; height:90%;
           border-radius: inherit;
           background: #000;
           box-shadow: 0 0 40px 20px #000;
           transform: translateZ(-100px);
       }
       /*没什么可说的*/
       .popup-content {
           background: #444;
           padding: 20px;
           box-sizing: border-box;
           border-radius: 20px 0 20px 0;
       }
       /*文字部分*/
       .popup-text {
           color: white;
           font-family: 'Roboto', sans-serif;
           font-size: 20px;
           line-height: 30px;
           font-weight: 100;
           text-align: center;
           transform: translateZ(15px);
           -webkit-transform:translateZ(15px);
           -webkit-user-select: none ;
       }
       /*为了同背景渐变有个呼应，作了b元素，作了同背景渐变类似的颜色*/
       .popup-text b {
           color: #ff608f;
           font-weight: 300;
       }

关键js部分

引入了jQuery

var moveForce = 30; //限制偏移距离
var rotateForce = 20; // 限制偏移角度
//DOM0级鼠标移动事件
$(document).mousemove(function(e) {
    var docX = $(document).width();//屏幕宽
    var docY = $(document).height();//屏幕高
    /**
      * pageX|Y：鼠标的x|y坐标,用其减去屏幕一半可以探测是在左还是右，同时除以一半计算偏移系数，乘以限制最大偏移距离，得到组件的偏移距离
      */
    var moveX = (e.pageX - docX/2) / (docX/2) * moveForce;
    var moveY = (e.pageY - docY/2) / (docY/2) * moveForce;
    /**同偏移距离相似*/
    var rotateY = (e.pageX / docX * rotateForce*2) - rotateForce;
    var rotateX = -((e.pageY / docY * rotateForce*2) - rotateForce);
    /**为组件设置偏移量*/
    $('.popup')
        .css('left', moveX+'px')
        .css('top', moveY+'px')
        .css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');
});