0

基本上，我要的是对执行以下操作的最佳方法的意见；

我基本上已经有了这个：http: //jsfiddle.net/BnJ3G/1/这或多或少是一个取决于滚动事件的背景动画。类似于视差类型函数。

我只是想知道，用很少的编码来处理多轴的最简单方法，我需要大约 10 种不同的东西来应用这种效果，但目前我仅限于 +x 轴，因为我需要（ +X、-X、+Y 和 -Y)。有没有办法可以改变它，以便我可以在主要功能之外做一些简单的事情？

$('#element1').animatePosX(percentage);
$('#element2').animateNegY(percentage);

ETC...

如果可能的话，我很想得到帮助！

4

2 回答 2

0

我们开发了一个 jQuery 插件来以一种简单的方式做到这一点：http ://globocom.github.com/destaque/ 仅使用 animate 来实现这种效果并不是那么简单。

于 2012-10-15T20:51:56.787 回答
0

我花了一段时间才弄清楚简单地模拟视差滚动的基本数学。这可能不是向网站添加视差的最佳方式，但它目前对我有用。希望这对其他人来说是一个有用的起点。它不会影响大小或模糊或任何东西——只会影响滚动的速度。

// i is id, t is distance from top, d is depth (1-100)
// depth of 50 will scroll at normal scroll speed.
plax = [{
    "i": "sue",
    "t": 50,
    "d": 90
  },
  {
    "i": "mark",
    "t": 100,
    "d": 50
  },
  {
    "i": "janis",
    "t": 500,
    "d": 50
  },
  {
    "i": "donna",
    "t": 300,
    "d": 1
  }
];


$window = $(window);
$(function() {
  $.each(plax, function() {
    eyedee = "#" + this['i'];
    $(eyedee).addClass("plax");
    m = mathIt(this['d'], this['t']);
    $(eyedee).css({
      "top": m,
      "z-index": -this['d']
    });

  });
  $window.scroll(function() {
    $.each(plax, function() {
      eyedee = "#" + this['i'];
      m = mathIt(this['d'], this['t']);

      $(eyedee).css("top", m);
    });
  });
});

function mathIt(d, t) {
  return ((((d - 50) * 2) / 100) * $(window).scrollTop()) + t;
}
.plax {
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sue">here's sue</div>
<div id="mark">
  <h2>here's mark</h2>
</div>
<div id="donna">
  <h1>here's donna</h1>
</div>
<div id="janis">
  <h2>here's janis</h2>
</div>

于 2017-06-09T21:20:42.793 回答