素材牛VIP会员

jQuery 3D全屏立方体切换过渡插件cubeTransition.js

 所属分类:网页特效-焦点图/幻灯片

 浏览:3103次  评论:0次  更新时间:2016-10-31
牛币素材VIP可免积分下载
jQuery 3D全屏立方体切换过渡插件cubeTransition.js兼容IE10
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
项目地址(website):https://github.com/HTML50/cubeTransition.js
素材描述:cubeTransition.js是一款超酷3D全屏立方体页面切换过渡动画jQuery插件。该插件通过CSS 3D transforms 和 CSS Animations来制作平滑的立方体过渡动画特效。

详细介绍

使用方法:

在页面中引入jquery.min.js,jquery.touchSwipe.js(用于移动触摸事件),mousewheel.js(用于鼠标滚动事件),和cubeTransition.js文件。

<script src='js/jquery.min.js'></script>
<script src='js/mousewheel.js'></script>
<script src="js/jquery.touchSwipe.js"></script>
<script src="js/cubeTransition.js"></script>

CSS样式

为界面添加下面的基本CSS样式

* {
  margin: 0;
  padding: 0;
}
 
html, body {
  overflow: hidden;
  height: 100%;
}
 
#cubeTransition {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  perspective: 1200px;
}
 
#cubeTransition div {
  min-height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transform-style: preserve-3d;
  font-size: 5em;
  color: #fff;
  display: none;
}
 
#cubeTransition h2 {
  position: relative;
  top: 200px;
  margin: 0;
  font-size: 1.5em;
  text-align: center;
  text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.1 );
}
 
.top { z-index: 9999 }
 
.rotateCubeTopOut {
  transform-origin: 50% 100%;
  animation: rotateCubeTopOut .6s both ease-in;
}
 
.rotateCubeTopIn {
  transform-origin: 50% 0%;
  animation: rotateCubeTopIn .6s both ease-in;
}
 
.rotateCubeBottomOut {
  transform-origin: 50% 0%;
  animation: rotateCubeBottomOut .6s both ease-in;
}
 
.rotateCubeBottomIn {
  transform-origin: 50% 100%;
  animation: rotateCubeBottomIn .6s both ease-in;
}
 
@keyframes 
rotateCubeTopOut {  
  50% {
    animation-timing-function: ease-out;
    transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
  }
  100% {
    opacity: .3;
    transform: translateY(-100%) rotateX(90deg);
  }
}
 
@keyframes 
rotateCubeTopIn {
  0% {
    opacity: .3;
    transform: translateY(100%) rotateX(-90deg);
  }
  50% {
    animation-timing-function: ease-out;
    transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
  }
}
 
@keyframes 
rotateCubeBottomOut {  
  50% {
    animation-timing-function: ease-out;
    transform: translateY(50%) translateZ(-200px) rotateX(-45deg);
  }
  100% {
    opacity: .3;
    transform: translateY(100%) rotateX(-90deg);
  }
}
 
@keyframes 
rotateCubeBottomIn {  
  0% {
    opacity: .3;
    transform: translateY(-100%) rotateX(90deg);
  }
   50% {
    animation-timing-function: ease-out;
    transform: translateY(-50%) translateZ(-200px) rotateX(45deg);
  }
}

HTML结构

基本的页面HTML结构如下

<div id="cubeTransition">
  <div><h2>cubeTransition.js<;/h2></div>
  <div><h2>Elegant,<;/h2></div>
  <div><h2>exected!<;/h2></div>
  <div><h2>Simple.<;/h2></div>
</div>

讨论这个素材(0)回答他人问题或分享使用心得会奖励牛币

〒_〒 居然一个评论都没有……

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)