将SeqeunceJS与Twitter Bootstrap 3.0集成

Question

I want to add parallax scrolling effect to my bootstrap theme, and I came across SequenceJS.

Can I use both of them without overriding each other?

how should I do that:

1. Make parallal DOM tree for the background and apply SequenceJS on it.
2. Use the original Bootstrap Dom tree and add SequenceJS classes to it.
3. Any other suggestion...

Thanks!

Answer 1

Yes you can use both SequenceJS & Bootstrap without conflict.

Some important things to keep in mind:

1. include the correct jQuery version - you'll need to include jQuery v 1.9.0 or 1.9.1, as the lowest Bootstrap 3 supports is 1.9.0 and the highest SequenceJS supports is 1.9.1. (see https://github.com/twbs/bootstrap/blob/v3.2.0/bower.json & http://www.sequencejs.com/developers/documentation/#add-files respectively).

2. order your javascript libraries in the right order (jQuery, then Bootstrap, then SequenceJS).

Here's a jsfiddle that demonstrates the two combined libraries - http://jsfiddle.net/bzelip/keu606ed/ .

I created it using the Jumbotron Bootstrap template & the parallax Sequence theme. In the bootstrap html, I replaced the row with three columns below the jumbotron with a row with one full column, in which I inserted the html from the parallax Sequence theme. I then combined the css from both sources, linked to the required javascripts, and pasted in the contents of the script included in the parallax Sequence theme titled sequencejs-options.sliding-horizontal-parallax.js .