HTML5 GSAP点击立方体起跳动效

点击物体后它反应起跳，也可拖拉旋转。

html5, cube

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

const draggable = document.querySelector('.draggable')
const proxy = document.querySelector('.proxy')
const cube = document.querySelector('.cube')

TweenLite.set(cube, {
  transformOrigin: '50% 100% 34px',
  rotationY: 45
})

function rotate (x, y) {
  TweenLite.set(cube, {
    rotationY: x / 2,
    rotationX: -y / 2,
  })
}

Draggable.create(proxy, {
  type: 'x,y',
  trigger: draggable,
  throwProps: true,
  onDrag: function () {
    rotate(this.x)
    //rotate(this.x, this.y)
  },
  onDragEnd: function () {
    TweenLite.to(this.target, 2, {
      throwProps: {
        x: 'auto',
        y: 'auto',
      },
      onUpdate: function () {
        rotate(this.target._gsTransform.x)
        //rotate(this.target._gsTransform.x, this.target._gsTransform.y)
      },
      ease: Power4.easeOut,
    })
  }
})

function mouseDown () {
  TweenLite.to(cube, .4, {
    y: 0,
    scaleX: 1.2,
    scaleY: .2,
    scaleZ: 1.2,
    ease: Power4.easeOut,
  })
}

function mouseUp () {
  // jump
  TweenLite.to(cube, .05, {
    scaleX: 1,
    scaleY: 1,
    scaleZ: 1,
    ease: Power0.easeNone,
  })
  
  TweenLite.to(cube, .5, {
    y: -64 * 4,
    ease: Back.easeOut,
    delay: .05,
  })
  
  TweenLite.to(cube, .4, {
    y: -64 * 2,
    scaleY: 3,
    ease: Power1.easeOut,
    delay: .41,
  })
  
  TweenLite.to(cube, .4, {
    y: 0,
    ease: Power4.easeOut,
    delay: .55,
  })
  
  TweenLite.to(cube, 2, {
    scaleY: 1,
    ease: Elastic.easeOut,
    delay: .65,
  })
}

document.addEventListener('touchstart', mouseDown)
document.addEventListener('touchend', mouseUp)

document.addEventListener('mousedown', mouseDown)
document.addEventListener('mouseup', mouseUp)

// jump once
mouseDown()
setTimeout(mouseUp, 400)

编译

CSS

html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

h1 {
  color: #444;
  font-family: 'Helvetica Neue', 'Roboto', sans-serif;
  font-weight: 100;
  margin: 1em;
}

.draggable {
  perspective: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateX(-20deg);
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cube {
  width: 4em;
  height: 4em;
  transform-style: preserve-3d;
  &:after, &:before{
    content: "";
    will-change: transform;
    display: block;
    width: 4em;
    height: 4em;
    background: #333;
    position: absolute;
    box-shadow: inset 0 0 0 1px #333;
  }
  
  &:before {
    transform: translateZ(4em);
    background: #FF6F69;
  }

.face {
    box-shadow: inset 0 0 0 1px #222;
    position: absolute;
    width: 4em;
    height: 4em;
    background: rgba(0,0,0,.4);
    transform-style: preserve-3d;
    &:nth-child(1) {
      transform: rotateX(90deg);
      transform-origin: 50% 0;
      background: #FFEEAD;
    }
    &:nth-child(2) {
      transform:
        rotateX(90deg)
        translateZ(-4em);
      transform-origin: 50% 0;
      background: #FFCC5C;
    }
    &:nth-child(3) {
      transform:
        rotateX(90deg)
        rotateY(-90deg);
      transform-origin: 100% 0;
      background: #96CEB4;
    }
    &:nth-child(4) {
      transform:
        rotateX(90deg)
        rotateY(-90deg)
        translateZ(4em);
      transform-origin: 100% 0;
      background: #AAD8B0;
    }
  }
}

HTML

点击物体后它反应起跳，也可拖拉旋转。

html5, cube

编辑器支持Emmet

快捷键

点击物体后它反应起跳，也可拖拉旋转。

html5, cube

HTML5 GSAP移动应用中点击按钮液体弥漫全屏的交互动画

HTML5 CSS3 GSAP带音效的超级马里奥跑跳动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：