使用带有bootstrap3的skrollr

时间:2015-02-12 07:35:06

标签: twitter-bootstrap-3 skrollr

是否可以使用skrollr和bootstrap?我的意思是有可能使用skrollr使用bootstrap 3响应开发网站吗?

1 个答案:

答案 0 :(得分:4)

现在我正在开发一个项目,我正在使用bootstrap 3和skrollr,它并没有让我的生活更加艰难,只需使用skrollr就像你会正常使用它一样,当你重写css时仍然要注意。我建议的移动版本是关闭skrollr并使其成为静态网站,也不要在标记中手动输入数据属性,使用javascript。如果使用javascript,则可以在调整窗口大小时重新计算数据属性中给出的值。

//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);
    }
}

ussage的例子:

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>

这个功能不是我做的,我也在互联网上找到了这个方法。我不想为它拿信用。

希望有所帮助