html 自动翻屏,index.html

jQuery鼠标滚动全屏3D翻转动画切换代码内容动效出现

.page4 h2 {

margin: auto !important;

position: absolute !important;

top: 0 !important;

left: 0;

bottom: 0;

right: 0;

height: 100px;

transform: none;

transition: all 3s;

}

.ani {

transform: scale(3) rotate(360deg) !important;

}

cubeTransition.js

Elegant,

exected!

Simple.

a simple demo for cubeTransition.js

function animationIn(i) {

console.log(i, 'i\'m in');

switch (i) {

case 1:

$('.page2 h2').fadeIn();

break;

case 2:

$('.page3 h2').animate({top: '40%', left: '30%'}, 1000);

break;

case 3:

setTimeout(function () {

$('.page4 h2').addClass('ani');

console.log('hhh')

}, 0);

break;

default:

;

}

}

function animationOut(i) {

console.log(i, 'i\'m out');

switch (i) {

case 1:

$('.page2 h2').fadeOut();

break;

case 2:

$('.page3 h2').animate({top: 0, left: 0}, 1000);

break;

case 3:

$('.page4 h2').removeClass('ani');

break;

default:

;

}

}