javascript - 响应式动画展位

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

目前您的元素相对于窗口大小定位。相反，您需要添加某种包装器并使其相对于包装器。

将所有元素包裹在一个 div 中并居中对齐。然后将所有元素放置在包装外部。如果您希望它具有响应性，您可以将包装器设置为百分比宽度。

希望有所帮助。