向下滚动更改元素的背景图像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屋!