HTML5 锤子手机的品牌宣传横幅

Smartisan T2的HTML5宣传banner 使用两张图片和卡片悬停倾斜动效结合起来实现的一个广告作品。有一个简单的3D平行视差效果。

html5, banner, ad

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1669
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$(function() {
    $(".bg").mouseenter(function() {
        var thisPX = $(this).offset().left;
        var thisPY = $(this).offset().top;
        var boxWidth = $(this).outerWidth();
        var boxHeight = $(this).outerHeight();
        $(this).addClass("threeD");
        $(".threeD").mousemove(function(event) {
            var mouseX = event.pageX - thisPX;
            var mouseY = event.pageY - thisPY;
            var X;
            var Y;
            if (mouseX > boxWidth / 2) {
                X = mouseX - boxWidth / 2;
            } else {
                X = mouseX - boxWidth / 2;
            }
            if (mouseY > boxHeight / 2) {
                Y = boxHeight / 2 - mouseY;
            } else {
                Y = boxHeight / 2 - mouseY;
            }
            $(".threeD").css({
                "-webkit-transform": "rotateY(" + X / 50 + "deg) " + "rotateX(" + Y / 50 + "deg)"
            });

// console.log(X + "," + Y);
        });
    });
    $(".bg").mouseleave(function() {
        $(this).removeClass("threeD");
        $(this).css({
            "-webkit-transform": "rotateY(0deg) rotateX(0deg)"
        });
    });
});

编译

CSS

* {
    font-family: "Microsoft YaHei";
    transition: all .3s;
    -webkit-transition: all .3s;
    transition-timing-function: linear;
    -webkit-transition-timing-function: linear;
}
.banner {
    perspective: 800px;
}
.bg {
    position: relative;
    width: 600px;
    height: 300px;
    margin: 100px auto;
    background: url("http://static.smartisanos.cn/index/img/store/home/banner-3d-item-1-box-1_61bdc2f4f9.png") center no-repeat;
    background-size: 100% 100%;
    border-radius: 10px;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    -webkit-transform: rotateY(0deg) rotateX(0deg);
}
.img {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 8px;
    left: 0;
    background: url("http://static.smartisanos.cn/index/img/store/home/banner-3d-item-1-box-3_8fa7866d59.png") center no-repeat;
    background-size: 95% 100%;
}
.text {
    position: absolute;
    top: 20%;
    right: 10%;
    font-size: 30px;
    color: #fff;
    text-align: right;
    font-weight: lighter;
}
.copyright {
    position: absolute;
    bottom: 10%;
    right: 10%;
    font-size: 10px;
    color: #fff;
    text-align: right;
    font-weight: lighter;
}
.a {
    -webkit-transform: translateZ(40px);
}
.b {
    -webkit-transform: translateZ(20px);
}
.c {
    -webkit-transform: translateZ(0px);
}

HTML

Smartisan T2的HTML5宣传banner 使用两张图片和卡片悬停倾斜动效结合起来实现的一个广告作品。有一个简单的3D平行视差效果。

html5, banner, ad

编辑器支持Emmet

快捷键

Smartisan T2的HTML5宣传banner 使用两张图片和卡片悬停倾斜动效结合起来实现的一个广告作品。有一个简单的3D平行视差效果。

html5, banner, ad

HTML5 GSAP 在手机上展示地图位置的动画效果

HTML5 超萌的电子宠物 | 口袋妖怪

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：