将 skrollr 与 bootstrap3 结合使用
Using skrollr with bootstrap3
是否可以使用 skrollr 和 bootstrap?我的意思是有可能使使用 skrollr 开发的网站响应使用 bootstrap 3 吗?
现在我正在做一个项目,我正在使用 bootstrap 3 和 skrollr,它并没有让我的生活变得更难,就像你正常使用它一样使用 skrollr,重写时还是要注意css。我对移动版本的建议是关闭 skrollr 并将其设为静态网站,并且也不要在标记中手动键入数据属性,使用 javascript 即可。如果您使用 javascript,则可以重新计算 window 调整大小时您在数据属性中提供的值。
//used to set dynamically the attributes for animations
var setSkrollr = function($el, data) {
// loop all data entries (scroll positions + css property & value)
for (var i = 0, l = data.length; i < l; i++) {
// the current data entry
var d = data[i]
// the scroll position (in pixels)
px = d[0];
// the css property + value to set
css = d[1];
$el.attr('data-' + px, css);
}
}
用法示例:
setSkrollr($('.box1'),[[0, 'opacity:1;'],
[500, 'opacity:1;'],
[600, 'opacity:0;']]);
标记将如下所示:
<div class = "box1" data-0="opacity:1;" data-500="opacity:1;" data-600="opacity:0;"></div>
这个功能不是我做的,这个方法我也是在网上找的。我不认为这是功劳。
希望对您有所帮助
是否可以使用 skrollr 和 bootstrap?我的意思是有可能使使用 skrollr 开发的网站响应使用 bootstrap 3 吗?
现在我正在做一个项目,我正在使用 bootstrap 3 和 skrollr,它并没有让我的生活变得更难,就像你正常使用它一样使用 skrollr,重写时还是要注意css。我对移动版本的建议是关闭 skrollr 并将其设为静态网站,并且也不要在标记中手动键入数据属性,使用 javascript 即可。如果您使用 javascript,则可以重新计算 window 调整大小时您在数据属性中提供的值。
//used to set dynamically the attributes for animations
var setSkrollr = function($el, data) {
// loop all data entries (scroll positions + css property & value)
for (var i = 0, l = data.length; i < l; i++) {
// the current data entry
var d = data[i]
// the scroll position (in pixels)
px = d[0];
// the css property + value to set
css = d[1];
$el.attr('data-' + px, css);
}
}
用法示例:
setSkrollr($('.box1'),[[0, 'opacity:1;'],
[500, 'opacity:1;'],
[600, 'opacity:0;']]);
标记将如下所示:
<div class = "box1" data-0="opacity:1;" data-500="opacity:1;" data-600="opacity:0;"></div>
这个功能不是我做的,这个方法我也是在网上找的。我不认为这是功劳。
希望对您有所帮助