jQuery 3D视差

下载代码

html

css

分享到微信朋友圈

html

css

body {
  position: relative;
  overflow: hidden;
  -webkit-perspective: 4000px;
  perspective: 4000px;
  background: none;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-align: center;
}

h2,
h3 {
  margin: 0;
  color: rgba(255, 255, 255, 1.00);
  text-shadow: 0px 20px 10px rgba(0, 0, 0, 0.75);
}

h2 {
  font-size: 50px;
  line-height: 50px;
}

h3 {
  font-weight: 300;
}

.wrap {
  top: 0;
  left: 0;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  transition: transform 100ms linear;
  box-sizing: border-box;
  padding: 300px 30px 300px 30px;
}

.background {
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: -100px;
  left: -100px;
  bottom: -100px;
  right: -100px;
  background-image: url(https://images.unsplash.com/photo-1497250681960-ef046c08a56e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2434&q=80);
  background-size: cover;
  -webkit-transform: translateZ(150px);
  -ms-transform: translateZ(150px);
  transform: translateZ(150px);
}

.content {
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(300px);
  -ms-transform: translateZ(300px);
  transform: translateZ(300px);
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  max-width: 350px;
}

JavaScript

$(function() {
  var isMobile = window.matchMedia("only screen and (max-width: 768px)");
  var moveForce = 30; // max popup movement in pixels
  var rotateForce = 5; // max popup rotation in deg
  $(".wrap").mousemove(function(e) {
    var docX = $(this).outerWidth();
    var docY = $(this).outerHeight();

var moveX = (e.pageX - docX / 2) / (docX / 2) * -moveForce;
    var moveY = (e.pageY - docY / 2) / (docY / 2) * -moveForce;

var rotateY = (e.pageX / docX * rotateForce * 2) - rotateForce;
    var rotateX = -((e.pageY / docY * rotateForce * 2) - rotateForce);

$('.wrap').css({
      '-moz-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      '-webkit-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      '-ms-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      '-o-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      'transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
    });
  });
  if (isMobile.matches) {
    function onDeviceMotion(event) {
      rotateForce = 10; // max popup rotation in deg
      var accel = event.accelerationIncludingGravity;

var docX = $(this).outerWidth();
      var docY = $(this).outerHeight();

var accelX = ((accel.x + 10) / 20) * docX;
      var accelY = ((accel.y + 10) / 20) * docY;

var moveX = (accelX - docX) / (docX) * -moveForce;
      var moveY = (accelY - docY) / (docY) * -moveForce;

var rotateY = -((accelX / docX * rotateForce * 2) - rotateForce);
      var rotateX = -((accelY / docY * rotateForce * 2) - rotateForce);

$('.').css({
        '-moz-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        '-webkit-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        '-ms-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        '-o-transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
        'transform': 'rotateX(' + rotateX + 'deg' + ') rotateY(' + rotateY + 'deg' + ') translateZ(0)',
      });
    };
    window.addEventListener("devicemotion", onDeviceMotion, false);
  }
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg