Question

我使用bootstrap，我需要移动列。我的页面由4列整页高度（col-md-3）组成;我还使用了Fullpage.js。我希望当用户滚动到包含列的部分时，用户不会看到列，但这些列从右侧（屏幕外）显示在左侧并填充页面。

这是专栏代码

<div class="section" id="section1" style="margin:0px; padding:0px; margin:0px; padding:0px;">
        <div id="slogan" style="width:100%; text-align:center">
            <img src="images/slogan.png" style="width:50%; min-width: 530px;" />
        </div>
        <div style="width:100%">
            <div id="aa" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="margin:0px; padding:0px; text-align:center; background-color:#FFF5E9;">
                <img src="images/aa.png" style="width:60%;" />
                <img src="images/bb.png" style="width:60%;" />
                <a class="hidden-xs scroll" href="../Home.html#secondPage" style="margin:0px; padding:0px; margin-left:-40px; top:-35px;"></a>
            </div>

            <div id="cc" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="margin:0px; padding:0px; text-align:center; background-color:#e3d4c1;">
                <img src="images/cc.png" style="width:60%" />
                <img src="images/vv.png" style="width:60%;" />
                <a class="hidden-xs scroll" href="../Home.html#secondPage" style="margin:0px; padding:0px; margin-left:-40px; top:-35px;"></a>
            </div>

            <div id="dd" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="margin:0px; padding:0px; text-align:center; background-color:#FFF5E9;">
                <img src="images/gg.png" style="width:60%;" />
                <img src="images/hh.png" style="width:60%;" />
                <a class="hidden-xs scroll" href="../Home.html#secondPage" style="margin:0px; padding:0px; margin-left:-40px; top:-35px;"></a>
            </div>

            <div id="rr" class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="margin:0px; padding:0px; text-align:center; background-color:#e3d4c1;">
                <img src="images/rr.png" style="width:60%;" />
                <img src="images/yy.png" style="width:60%;" />
                <a class="hidden-xs scroll" href="../Home.html#secondPage"     style="margin:0px; padding:0px; margin-left:-40px; top:-35px;"></a>
            </div>
        </div>

现在这些列是可见的，但我希望它从右边（屏幕外）到达。

谢谢！

Answer 1

我认为你想要一个特定部分的内容动画。

在这种情况下，您可以通过Google搜索来使用许多插件。

我找到了一个可能让你满意的：http://git.blivesta.com/animsition/

说明很简单。如果您对此有任何疑问，请与我们联系。

否则您也可以检查已回答类似的问题：Animate bootstrap columns

如何移动bootstrap列？

1 个答案: