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

Scott 发布于2019-08-22 10:47 / 2142人阅读

摘要：以前看到锤子科技官网的效果挺好玩的，一直没有研究今天看到饥人谷，使用给出了一种实现方式我自己用原生也实现了一遍。我的方法原理，如图所示，假设图中的小圆点是中心点的位置为事件发生的位置。在水平方向上，就是元素要旋转的度数代码在最下方。

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

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

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

//html

    banner

//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 = "";
        })    
})();

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91250.html

锤子官网3D翻转特效banner插件

摘要：锤子官网翻转特效插件每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的，感觉科技感十足这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现同时也将代码进行了封装，做成了可以供大家引用的插件欢迎大家体验，同时提出锤子官网3D翻转特效banner插件 **每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足这么有趣的效果...

gougoujiang 2019-08-30 13:49 评论0 收藏0
锤子官网3D翻转特效banner插件

摘要：锤子官网翻转特效插件每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的，感觉科技感十足这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现同时也将代码进行了封装，做成了可以供大家引用的插件欢迎大家体验，同时提出锤子官网3D翻转特效banner插件 **每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足这么有趣的效果...

alogy 2019-08-21 17:15 评论0 收藏0
锤子官网3D翻转特效banner插件

摘要：锤子官网翻转特效插件每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的，感觉科技感十足这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现同时也将代码进行了封装，做成了可以供大家引用的插件欢迎大家体验，同时提出锤子官网3D翻转特效banner插件 **每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足这么有趣的效果...

meteor199 2019-08-01 17:51 评论0 收藏0