向下滚动更改元素的背景图像5次 [英] Change background-image of element 5 times on scroll down

问题描述

我希望在页面上具有向下滚动的效果，当您到达一张幻灯片时，它会停止在该幻灯片上，但是随着您向下滚动，元素的背景图像会不断变化.我正在看scrolldeck.js http://johnpolacek.github.io/scrolldeck. js/decks/sensitive/

要执行此操作，但是我不确定如何根据用途滚动的数量来删除/添加类.有什么线索吗?谢谢！

解决方案

您可以使用窗口滚动来确定显示什么图像以及何时显示.简单的例子.

var currentUrl = null;
var imageControl = function( event ) {
   var fromTop = $(window).scrollTop(), // The distance from the top of the page
       url = null;

   if(fromTop < 2000) {
     url = 'http://placehold.it/1000/FF0';
   } else if (fromTop > 2000) {
     url = 'http://placehold.it/1000/F00';
   }

   if(url !== currentUrl) {
      $('body').css('background', 'url(' + url + ')');
      currentUrl = url;
   }
};

$(window).scroll(imageControl);

演示: http://jsfiddle.net/2Pfsy/

您可以对此进行很多改进，以使其在不需要等时不会运行此代码.

I'd like to have a scrolling down effect on a page, that when you reach one slide it stops on that slide but as you keep scrolling down the background-image of an element keeps changing. I'm looking at scrolldeck.js http://johnpolacek.github.io/scrolldeck.js/decks/responsive/

to do this but I'm not sure how I could remove/add class depending on the amount the use has scrolled. Any clues? Thanks!

解决方案

You can use window scroll to determine what image to display and when. quick example.

var currentUrl = null;
var imageControl = function( event ) {
   var fromTop = $(window).scrollTop(), // The distance from the top of the page
       url = null;

   if(fromTop < 2000) {
     url = 'http://placehold.it/1000/FF0';
   } else if (fromTop > 2000) {
     url = 'http://placehold.it/1000/F00';
   }

   if(url !== currentUrl) {
      $('body').css('background', 'url(' + url + ')');
      currentUrl = url;
   }
};

$(window).scroll(imageControl);

Demo: http://jsfiddle.net/2Pfsy/

You can improve this a lot so it doesn't run this code when it doesn't need to etc....

这篇关于向下滚动更改元素的背景图像5次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！