Apple TV的海报视差效果

所属分类:媒体-图片展示

 27551  375  查看评论 (4)
分享到微信朋友圈
X
Apple TV的海报视差效果 ie兼容11

HTML如下:

<div class="poster">
  <div class="shine"></div>
  <div class="layer-1"></div>
  <div class="layer-2"></div>
  <div class="layer-3"></div>
  <div class="layer-4"></div>
  <div class="layer-5"></div>
</div>
body {
    background: linear-gradient(to bottom, #f6f7fc 0%,#d5e1e8 40%);
    transform-style: preserve-3d;
    transform: perspective(800px);
}
.poster {
    width: 320px;
    height: 500px;
    position: absolute;
    top: 50%; left: 50%;
    margin: -250px 0 0 -160px;
    border-radius: 5px;
    box-shadow: 0 45px 100px rgba(0, 0, 0, 0.4);
    overflow:hidden;
}


相关插件-图片展示

jQuery图片放大、缩小、旋转

jQuery图片旋转插件jQuery.artZoom修改版
  图片展示
 42216  271

图片点击放大并居中显示

纯js实现的一个图片点击放大并居中显示的插件,支持自定义图片详情,可作为图片浏览插件,也可自行改写
  图片展示
 47062  325

jQuery仿淘宝评论区

jQuery仿淘宝评论区图片放大预览
  图片展示
 11417  183

javascript动感相册

javascript实现动感相册,放大缩小,不依赖其它库
  图片展示
 40710  357

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    RioHsc 0
    2018/7/31 17:56:58
    请问如何添加这个效果 回复
    静默 0
    2017/4/22 20:23:31

    我想在我的网页的图片添加这种效果,可是怎么改呢?图片已写好。

    回复
    SiriBen 0
    2016/9/25 17:09:32
    我想请问,这个是移动端的尺寸,可是在移动端无法监听鼠标移动事件呀,这个如何体现这种3D效果呢?
        虚构丶0
        2016/9/28 11:09:59
        监听重力感应
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复