Отзывчивая анимация кабины

Question

Я пытаюсь создать анимированную выставочную стенд, где клиенты могут выбрать варианты справа, и они прилетают и создают изображение, размещенное ниже.

Я успешно получил эту работу на определенный монитор размера, но это не реагирует. У меня был большой опыт работы с отзывчивым дизайном, но я не уверен, что лучший метод для создания этого дизайна отвечает, учитывая, что анимация летает из разных скрытых div.

Вот ссылка на файл стартера: http://barret.co/resources/build-a-booth/index.html

Вот пример кода: HTML:

<aside> 
     <h1>Let's build a booth!</h1><br> 

     <h2>Select your pieces <i class="fa fa-arrow-down"></i></h2> 
     <hr> 
      <ul> 
       <li><span id="1">Back Wall <i class="fa fa-plus"></i></span></li> 
       <li><span id="6">Banner <i class="fa fa-plus"></i></span></li> 
       <li><span id="2">Desk <i class="fa fa-plus"></i></span></li> 
       <li><span id="3">Left Rail <i class="fa fa-plus"></i></span></li> 
       <li><span id="4">Right Rail <i class="fa fa-plus"></i></span></li> 
       <li><span id="5">Chairs <i class="fa fa-plus"></i></span></li> 
      </ul>  
     </aside> 

     <div id="holder-top"> 
      <div id="banner"><img src="images/banner.png" alt="banner"></div> 
     </div> 

     <div id="holder-left"> 
      <div id="back-wall"><img src="images/back-wall.png" alt="back-wall"></div> 
      <div id="left-rail"><img src="images/left-rail.png" alt="left-rail"></div> 
      <div id="chairs"><img src="images/chairs.png" alt="chairs"></div> 
     </div> 

     <div id="holder-right"> 
      <div id="desk"><img src="images/desk.png" alt="desk"></div> 
      <div id="right-rail"><img src="images/right-rail.png" alt="right-rail"></div> 

     </div> 

CSS:

body { 
overflow-x:hidden; 
overflow-y:hidden; 
} 


aside span{ 
cursor:pointer; 
font-family: 'Montserrat', sans-serif; 
font-size:28px; 
} 

h1{ 
font-size:32px; 
font-family: 'Montserrat', sans-serif; 
font-weight:bold; 
text-transform:uppercase; 
} 

h2{ 
font-size:26px; 
font-family: 'Montserrat', sans-serif; 
font-weight:bold; 
} 

#showcase{ 
width:100%; 
height:900px; 
background:rgba(255,255,255,.85); 
} 

aside{ 
position:absolute; 
right:0px; 
top:0px; 
width:320px; 
height:100%; 
padding:20px; 
background:blue; 
color:white; 
} 

#back-wall{ 
position:absolute; 
top:10px; 
opacity:.2; 
} 

#desk{ 
position:absolute; 
top:300px; 
opacity:.2; 
} 

#left-rail{ 
position:absolute; 
top:271px; 
opacity:.2; 
} 

#right-rail{ 
position:absolute; 
top:271px; 
opacity:.2; 
} 

#chairs{ 
position:absolute; 
top:430px; 
opacity:.2; 
z-index:99; 
} 

#banner{ 
position:absolute; 
opacity:.2; 
z-index:99; 
} 

#holder-left{ 
left:-550px; 
position:absolute; 
top:101px; 
height:100%; 
} 

#holder-right{ 
right:-550px; 
position:absolute; 
top:101px; 
height:100%; 
} 

#holder-top{ 
position:absolute; 
top:-240px; 
z-index:9999; 
left:622px; 
} 

JS: JQuery (документ) .ready (функция() {

var a=0; 
    $("#1").click(function(){ 
     $("#back-wall").stop().animate({ 
      left: ++a%2*1150, 
      opacity:'1', 
      }, 'slow'); 
    }); 

    var b=0; 
    $("#2").click(function(){ 
     $("#desk").stop().animate({ 
      right: ++b%2*1460, 
      opacity:'1', 
      }, 'slow'); 
    }); 

    var c=0; 
    $("#3").click(function(){ 
     $("#left-rail").stop().animate({ 
      left: ++c%2*1150, 
      opacity:'1', 
      }, 'slow'); 
    }); 

    var d=0; 
    $("#4").click(function(){ 
     $("#right-rail").stop().animate({ 
      right: ++d%2*1345, 
      opacity:'1', 
      }, 'slow'); 
    }); 

    var e=0; 
    $("#5").click(function(){ 
     $("#chairs").stop().animate({ 
      left: ++e%2*1300, 
      opacity:'1', 
      }, 'slow'); 
    }); 
    var f=0; 
    $("#6").click(function(){ 
     $("#banner").stop().animate({ 
      top: ++f%2*370, 
      opacity:'1', 
      }, 'slow'); 
    }); 

}); // ready method 

Любая помощь очень ценится и благодарит заранее!

На боковой ноте я использую Font Awesome для значков «+» в верхнем правом углу. Я также пытался выяснить, как только щелкнуть, если значок можно изменить на значок «-». Это менее важно, но если кто-нибудь знает, я был бы чрезвычайно благодарен.

Еще раз спасибо!

Answer 1

В настоящее время ваши позиции расположены относительно размера окна. Вместо этого вам нужно добавить какую-то оболочку и сделать ее относительно обертки.

Оберните все предметы в центре и в центре. Затем поместите все предметы за пределы обертки. Вы можете сделать оболочку процентной шириной, если хотите, чтобы она была отзывчивой.

Надеюсь, что это поможет.