没有配置的好看视差

我需要为包含视差的客户端建立一个模板部分。这意味着我不会总是知道该部分最终在页面上的位置。这产生了一个问题，我的视差的y轴往往是关闭的，因为我使用的当前视差技术要求我设置开始点和停止点。没有配置的好看视差

我可以解决这个问题，如果我可以重复设置图像并设置图像之间的间距以防止它显示在该窗口中，那就是说，background-repeat：space;似乎不可调节。

我目前使用的是http://www.franckmaurin.com/blog/the-parallax-effect-with-jquery/有没有人知道一个解决方案，使视差图像看起来很棒，当它留给客户手中或另一种JavaScript技术，会为我做这个？

谢谢。

$.fn.parallax = function(options){ 
    var $$ = $(this); 
    offset = $$.offset(); 
    var defaults = { 
     'start': 100, 
     'stop': offset.top + $$.height() + 800, 
     'coeff': 0.95 
    }; 
    var opts = $.extend(defaults, options); 
    console.log("Parallax Works!"); 
    return this.each(function(){ 
     $(window).bind('scroll', function() { 
     windowTop = $(window).scrollTop(); 
     if((windowTop >= opts.start) && (windowTop <= opts.stop)) { 
      newCoord = windowTop * opts.coeff; 
      $$.css({ 
      'background-position': '0 '+ newCoord + 'px' 
      }); 
     } 
     }); 
    }); 
    }; 
// //parllax bind 
if ($('.commit').length){ 
    $('.commit').parallax({ 'start': 51 , 'stop':offset.top + $$.height(), 'coeff':-0.65 }); 
}

就代码而言并没有太多的展示，这个脚本可能不足以完成这项工作。

来源

2017-05-09 Brendan Jackson

提供一个包含代码的示例，最好是代码片段，以便我们可以理解您的问题。 –

不用多说，在类似的情况下，我推荐使用开箱即用的解决方案，如Parallax.JS，它只需要添加一个图像输入并且可以广泛配置。

但是，对于视差效果，不需要JavaScript，因为它是CSS3的内置功能，使用background-attachment: fixed;。举一个实际的例子检查this w3 article。在这种情况下，真正推荐使用此版本仅仅是出于性能方面的原因，因为CSS是由GPU增强的，而如果写错了，JavaScript则不是。在你提供的链接上，效果会感觉缓慢和阻塞，相信我，不是我的电脑是问题。

一般而言，总是使用CSS来表现动画效果和视觉效果，而且在视差方面，您只需要使用这一个命令。

来源

2017-05-09 13:16:14

没有配置的好看视差

回答

相关问题