仿照錘子科技官網的banner 3d效果

Scott 發布于2019-08-22 10:47 / 1962人閱讀

摘要：以前看到錘子科技官網的效果挺好玩的，一直沒有研究今天看到饑人谷，使用給出了一種實現方式我自己用原生也實現了一遍。我的方法原理，如圖所示，假設圖中的小圓點是中心點的位置為事件發生的位置。在水平方向上，就是元素要旋轉的度數代碼在最下方。

以前看到錘子科技官網的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 = "";
        })    
})();

GPU云服務器云服務器 banner效果js js如何實現3d效果官網的域名是什么意思有國內官網的國外服務器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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