没有配置的好看的视差

时间:2017-05-09 12:55:26

标签: javascript jquery parallax

我需要设置一个模板的一部分,我要为包含视差的客户端构建一个模板。这意味着我不会总是知道该部分将在页面上的哪个部分结束。这会产生问题,我的视差的y轴经常关闭,因为我使用的当前视差技术需要我设置起点和终点。

如果我可以在重复上设置图像并设置图像之间的间距以防止它在该窗口中显示,那么我可以解决这个问题,即背景重复:空间;似乎不可调整。

我目前正在使用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 });  
}

就代码而言,显示的内容不多,这个脚本可能不够强大,无法完成这项工作。

1 个答案:

答案 0 :(得分:0)

不用多说,在类似的情况下,我建议使用像Parallax.JS这样的现成解决方案,它只需要添加图像输入并且可以进行广泛配置。

但是对于视差效果,不需要JavaScript,因为它是CSS3的内置功能,@Override public boolean onContextItemSelected(MenuItem item) { AdapterView.AdapterContextMenuInfo info = (AdapterView.AdapterContextMenuInfo) item.getMenuInfo(); int menuItemIndex = item.getItemId(); String[] menuItems = getResources().getStringArray(R.array.contextmenu_home); String menuItemName = menuItems[menuItemIndex]; ArrayList<String> titleList = myListAdapter.getTitleList(); String songName= titleList.get(info.position); for (SongInfo song : songs) { if (song.getTitle().equals(songName)) { songID = song.getSong_id(); } } switch (menuItemName) { case "Edit": //Edit break; case "Delete": //Delete break; case "Send": //Send break; case "Add to Playlist": //Add break; } return true; } 。有关实际示例,请查看this w3 article。在这种情况下,建议仅出于性能原因使用此版本,因为CSS增强了CSS,而如果写错了,则JavaScript不会。在你提供的链接上,效果感觉缓慢而且很潮湿,相信我,而不是我的电脑是问题。

一般而言,总是将CSS用于动画和此类效果,并且使用视差,您只需使用这一个命令。