Как перемещать столбцы начальной загрузки?

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

Я думаю, что вам нужна анимация вашего контента для определенного раздела.

В этом случае вы можете использовать множество плагинов, просто поиграв с ним в игру.

я нашел тот, который может удовлетворить вас, может быть: http://git.blivesta.com/animsition/

инструкции очень просты. Дайте мне знать, если у вас есть проблемы с этим.

В противном случае вы можете также проверить уже ответили на подобный вопрос: Animate bootstrap columns