浙江 杭州

jQuery和CSS3超酷3D网格布局文章墙特效

系统分类: 网页特效 - jquery插件 - jQuery布局 2017-03-23

人气1048

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常炫酷的jQueryCSS3 3D网格布局文章墙特效。布局中所有的文章以网格形式排列,每个网格被制作为3D立方体。随着鼠标的移动,整个网格布局会在3D空间中倾斜。当鼠标放到一个网格上时,该网格中的文字会自动往上移动。点击某个网格,该网格会全屏展开显示出全部文字内容。

3D网格布局文章墙特效

制作方法

HTML结构

该3D网格布局文章墙特效使用嵌套<div>的HTML结构。每一个element是一篇文章立方体,back是立方体的背面,文章的简介放置在这个面中。立方体的上右下左四个面使用空的<div>来制作,face是立方体的正面。content是文章的详细内容,即点击立方体后切换到全屏页面中显示的文字。

<div class="scene">
  <div class="platform">
    <div class="element">
      <div class="back">
        <p class="hover-text">...</p>
      </div>
      <div class="side top"></div>
      <div class="side right"></div>
      <div class="side bottom"></div>
      <div class="side left"></div>
      <div class="face">
        <p class="front-text">Article name</br>武林秘籍</p>
      </div>
      <div class="content">
        <h1 class="heading">第一章 №1</h1>
        <p class="content-text">... </p>
        <span class="close">+</span>
      </div>
    </div>
  </div>
</div>    
              
CSS样式

在CSS代码中,.platform元素被添加了perspective属性,并设置了transform-style: preserve-3d;,用以制作3d空间,并使各个面具有立体感。同时,这里还使用了新的CSS3 will-change属性,关于这个属性可以参考CSS will-change属性介绍与注意事项

.platform {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 5;
  width: 90%;
  height: 90%;
  padding: 5vh 4.5vw;
  will-change: transform;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 2000;
          perspective: 2000;
}                
              

关于立方体的制作可以参考CSS3 3D transforms系列教程-3D长方体

JAVASCRIPT

在JS代码中,鼠标滑过某个网格时文字移动的效果是使用hoverEffect()函数来完成的。

function hoverEffect(px) {
    $('.element').each(function () {
        var $back = $(this).find('.back'), $text = $(this).find('.hover-text'), backH = $back.height(), textH = $text.height(), diff = 0, dur = 0, pxPerSecond = px || 100, that = this;
        $(this).unbind('mouseenter mouseleave');
        if (backH < textH) {
            diff = textH - backH + 50;
            dur = parseFloat(diff / pxPerSecond).toFixed(2);
            $text.css('transition', 'transform ' + dur + 's 0.5s linear');
            $(that).hover(function () {
                $text.css('transition', 'transform ' + dur + 's 0.5s linear');
                $text.css('transform', 'translateY(' + (0 - diff) + 'px)');
            }, function () {
                $text.css('transition', 'transform 0.5s 0.5s linear');
                $text.css('transform', 'translateY(0px)');
            });
        }
    });
};
hoverEffect();               
              

js代码还用于鼠标移动时整个平台3D倾斜的效果,以及点击某个网格后切换到相应的全屏界面的事件。具体代码请参考下载文件。

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:139.01KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1876.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3超酷3D网格布局文章墙特效

我当前G币余额:0 已下载次数:0

注:点击右侧分享按钮并且留下评论自动+10G币

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

说点什么...(已有0 评论)