Question

我正在尝试创建一个动画贸易展台，客户可以从右边的选项中选择，他们会飞入并创建下面发布的图像。

enter image description here

我已经成功地将其用于特定尺寸的显示器，但它没有响应。我在响应式设计方面有很多经验，但我不确定响应式创建此设计的最佳方法，因为动画是从各种隐藏的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（document）.ready（function（）{

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中的所有项目包裹起来并居中对齐。然后将所有项目放在包装器之外。如果您希望它能够响应，您可以使包装器具有百分比宽度。

希望有所帮助。

响应动画展位

1 个答案: