Question

我的灵感来自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插件吗？如果是的话，你有什么建议？

Answer 1

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

以下是一些链接：

https://github.com/Prinzhorn/skrollr

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

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

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

它并不完全相同，但它正处于您想要做的范围内。

Answer 3

我不认为你的例子严格符合“视差”的定义like this site.我很确定你可以用你的例子来实现类似的东西：

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

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

有趣的项目，享受：）

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

3 个答案: