仿照锤子科技官网的banner 3d效果

以前看到锤子科技官网的banner效果挺好玩的，一直没有研究；今天看到饥人谷，使用jquery给出了一种实现方式；我自己用原生js也实现了一遍。大致原理相同，但算法不同。

饥人谷源码地址：http://js.jirengu.com/negor/4...。

我的方法原理，如图所示，假设图中的小圆点是中心点；e的位置为事件发生的位置。在水平方向上，deltaX/centerX就是元素要旋转的度数代码在最下方。

//html
<div class="banner-wrap"><div class="banner">banner</div>
</div>

//css
.banner-wrap{height: 900px;outline: 1px dash #eee;padding: 200px 0;perspective: 1000px;
}
.banner{width: 500px;margin: 0 auto;line-height: 500px;box-sizing: border-box;background-color:  #37D7B2;text-align: center;line-height: 500px;font-size: 50px;color: #fff;
}

;(function(){var bannerWrap = document.querySelector('.banner-wrap'),banner = bannerWrap.querySelector('.banner');banner.addEventListener('mousemove', function(e){var centerX = banner.offsetLeft + banner.offsetWidth / 2,centerY = banner.offsetTop + banner.offsetHeight / 2;        var deltaX = e.pageX - centerX,deltaY = e.pageY - centerY;var percentageX = deltaX / centerX,percentageY = deltaY / centerY;var deg = 10;this.style.transform = 'rotateX(' + percentageY * -deg + 'deg)' + 'rotateY(' + percentageX * deg + 'deg)';});banner.addEventListener('mouseleave', function(e){this.style.transform = '';})
})();

仿照锤子科技官网的banner 3d效果相关推荐

android banner阴影,仿照锤子科技官网的banner 3d效果
以前看到锤子科技官网的banner效果挺好玩的,一直没有研究:今天看到饥人谷,使用jquery给出了一种实现方式:我自己用原生js也实现了一遍.大致原理相同,但算法不同. 我的方法原理,如图所示,假设 ...
仿着锤子科技官网进行的一个angular4.0项目~~~
关于项目关于angular4的一个项目,仿着锤子科技的官网写的,项目功能还没完全实现代码我放在了GitHub上 biubiubiu传送门,在myTests仓库里,欢迎指正和交流,这个截的动图有点一 ...
锤子科技官网：问题整理及注意事项
整理: 1.cursor: not-allowed;红色圆圈斜线:禁止操作. 2.white-space:nowrap; 字符不准换行. text-overflow:ellipsis;当文字超 ...
基于vue模仿苹果官网的banner图
**基于vue模仿苹果官网的banner图** 最近刚接了个新需求,需要做一个轮播图,于是二话不说,就使用element ui 自带的轮播图,简单又暴力,分分钟实现需求,然后又可以摸鱼了. 五分钟以后 ...
高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
Bootstrap框架: 模拟小风车科技官网
插件地址:http://www.bootcss.com Bootstrap是一个简洁.直观.强悍的前端开发框架,让web开发更迅速.简单. 本次我们利用它来模拟小风车科技的官网,因为它的官网开发也是利 ...
仿照（小米官网首页轮播图）特效js代码
最近跟轮播图杠上了,以前也接触过这个轮播图的写法,但是一般都是用插件,久而久之就忘记了!昨晚有学习了一下自己写这个js,虽然是依靠零散的记忆写出来的,可能自己并未真正理解吧!!!以下是我写的代码: & ...
焕然一新 | 寻息科技官网重磅升级
寻息科技新版官网上线啦! 在瞬息万变的万物互联时代,位置信息是各种物联网应用系统能够实现服务功能的基础.寻息科技作为深耕位置物联网领域13年的先锋企业,对自身产品体系.解决方案.服务能力.合作模式等 ...
deepin卸载了python_deepin官方论坛-深度科技官网旗下网站
原因:用turtle画五角星时中间颜色填充不了,想折腾一下,却失败了,还是有学习到相关知识,但问题没有解决. 1.首先查看自己电脑的python版本在root下, python3 --version ...

仿照锤子科技官网的banner 3d效果

仿照锤子科技官网的banner 3d效果相关推荐

最新文章

热门文章