Question

基本上，我要求的是对最佳方式的意见;

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

我只是想知道，用最少的编码解决多轴的最简单的方法，我有大约10种不同的东西我需要应用这种效果，但此刻我只限于+ x轴，我需要的地方（+ X，-X，+ Y和-Y）。有没有什么可以改变，以便我可以在主要功能之外做这样简单的事情？

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

等等...

如果可能，我会很乐意帮助你！

Answer 1

我们开发了一个简单的jQuery插件：http://globocom.github.com/destaque/ 仅仅通过动画来实现这种效果并不是那么简单。

Answer 2

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

// 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>

Jquery视差效应函数

2 个答案: