实现水平移动和缩放 UI 效果 - 可能的 jQuery 插件（？）答案

【问题标题】：Achieving Horizontal Movement and Zoom UI Effect - possible jQuery plugin(?)实现水平移动和缩放 UI 效果 - 可能的 jQuery 插件（？）
【发布时间】：2013-12-04 11:32:52
【问题描述】：

我的灵感来自http://www.diesel.com/bags-female。谁能解释我怎样才能达到这个效果？

我从这段代码开始：

  $(document).ready(function(){
    $('#background-thing').mousemove(function(e){
      var mousePos = (e.pageX/$(window).width())*100;
      $('#background-thing').css('backgroundPosition', mousePos+'% 0');
      //alert(mousePos);
    }); 
  });

但它只平移背景图像。我希望在作为锚点的背景图像上有多个链接，单击这些图像将对特定坐标产生缩放效果。

我应该看一个 jQuery 插件吗？如果是，您有什么建议？

【问题讨论】：

如果你觉得它们有用的话，你可以检查一下 - lodep.com/best-free-parallax-scrolling-jquery 和 jqueryscript.net/tags.php?/parallax。

标签： javascript jquery css user-interface jquery-plugins

【解决方案1】：

我过去曾使用 skrollr 进行快速实施，它对我很有帮助。

这里有一些链接：

https://github.com/Prinzhorn/skrollr

http://prinzhorn.github.io/skrollr/

希望对你有帮助，祝你好运！

【讨论】：

【解决方案2】：

我认为您不需要或不需要任何 Jquery 插件来完成您的工作。

您提供的参考页面使用 css 3d 转换和默认 Jquery。这是 W3schools 上的参考：http://www.w3schools.com/css/css3_3dtransforms.asp

具体如下：

//clearly broken code used just for example
$(document).ready(function(){
    $('#yourpagecontainer').on("click","a",function(){
        $(this).css("transform", "scale3d("+x+","+y+","+z+")");
    }
}

您提供的代码并没有说明您到底需要做什么，但也许您会从以下示例中受益：http://sarasoueidan.com/blog/windows8-animations/

它并不完全相同，但它在你想做的事情的范围内。

【讨论】：

【解决方案3】：

我不认为您的示例严格符合“视差”的定义like this site. 我很确定您可以通过以下方式实现与您的示例类似的东西：

更改 CSS3 背景大小和点击位置（如 this question 和 here 中所述）。
点击时在整个窗口的中心应用一个部分透明的 .png 和一个完全透明的“窗口”，以实现相同的模糊/焦点外观。您可以在部分透明的区域上应用不同的滤镜，以获得更具艺术感的效果。 Inkscape 在这方面做得很好，而且是免费的 ;)

但是，这不是跨浏览器解决方案。每个人都说“Internet Explorer”（8 及以下）。对于 9 及以上版本，请确保您有 <!DOCTYPE html /> 否则您的 CSS3 将变为 CSSFAIL。

有趣的项目，享受:)

【讨论】：