Question

我正在建立一个漫画出版网站。在设计漫画阅读器页面时，我非常关注UX。我想我必须按读者的显示尺寸显示漫画。

最近我看到Comic for Champion的页面从传奇联盟中称为Poppy，你可以查看它here。这个页面给了我很多灵感。正如您所看到的，此页面使用CSS transform: scale()进行响应和动画制作。我想使用这个但在谷歌上找不到任何教程。你们能告诉我一些如何实现这个目标的例子吗？

Answer 1

已更新： 此JS Fiddle-Updated模拟示例中的漫画页面，但更简单。

javascript代码包含注释行以解释它是如何工作的，因为大多数代码行都是自我解释的CSS，最重要的是#outer div的这些行模仿窗口重新调整大小的过渡：

transform: scale(1, 1);
transition: transform 0.5s ease-in-out;

并在媒体查询中

transform: scale(1.05, 1.05);
transition: transform 0.5s ease-in-out;

并且对于所有.inner div，我们使用.scaleUp类进行扩展，同时它们是透明的，然后在每次点击时我们将.scaleDown类添加到相应的项目以进行过渡扩展恢复原始尺寸并将opacity设置为1：

.scaleUp {
    transform: scale(1.3, 1.3);
}
.scaleDown {
    transform: scale(1, 1);
    opacity: 1;
    transition: all 0.5s ease-in;
}

在javascript中，xWidth的值应该比CSS媒体查询中定义的断点高1px也很重要。

完整代码：

var iDivs = $('#outer .inner'),
    iLeftDivs = $('.left .inner'),
    iRightDivs = $('.right inner'),
    outer = $('#outer'),
    lefts = $('.left'),
    xWidth = 651, i = 0, winW, isHeightChanged = false;
 
// Scaling all .inner divs up while opacity 0
iDivs.addClass('scaleUp');
control();

// On Click, call update(), and on resize call control() 
$(window).on('click', update);

$(window).on('resize', control);

// This will control showing or hiding the left column divs -
// If the window width is bigger than the break point width - 
// show default behaivor, otherwise if we still showing the -
// left divs then it shows the left divs, if we already -
// finished left and showing right divs, it shows right instead -
// With a little bug fix for .left margin-top when resizing before -
// reachign the point where showing .right divs;
function control(){
    winW = $(window).width();
    if(winW < xWidth){
        if(i > iLeftDivs.length ){
            lefts.css({'margin-top':'0'}).hide();
        }else{
            lefts.css({'margin-top':'10px'}).show();
        }
        if(!isHeightChanged){
            isHeightChanged = true;
        }else{
            if(isHeightChanged){
                isHeightChanged = false;
            }
        }
    }else{
        lefts.css({'margin-top':'0'}).show();
    }
}


function update(){
    winW = $(window).width();
    if(winW < xWidth){
        // If we already finished showing the divs on left and now -
        // showing the right divs, we hide the .left div.
        if(i >= iLeftDivs.length){
            $('.left').hide();
        }
        $(iDivs[i]).addClass('scaleDown');
        i++;
    }else{
        // As long as we haven't finished showing all divs, we add the -
        // the scaling down class to show them and increase the counter.
        if(i < iDivs.length){
            $(iDivs[i]).addClass('scaleDown');
            i++;
        }else{
            //Here you should write the code that populate the next page's images
        }
    }
}

html, body{
  padding:0;
  margin:0;
  overflow:hidden;
  background:orange;
}
#outer {
  min-width:450px;
  width: 90vw;
  max-width:800px;
  padding: 1vh 1vw;
  margin:0 auto;
  margin-top:5px;
  /* We scale it to original size with transition effect using below lines */
  transform: scale(1, 1);
  transition: transform 0.5s ease-in-out;
}
/* clear fix because of the float */
#outer:after {
  content: "";
  display: table;
  clear: both;
}
.inner {
  background-color: #090;
  width: calc(100% - 10px);
  color:white;
  min-height: 19vh;
  margin:5px;
  opacity:0;
  padding:3px;
}
.left, .right{
  width: calc(51% - 2vw);
  display:inline-block;
  float:left;
}
.right{
  float:right;
}

#in2 { background-color: navy; }
#in3 { background-color: maroon; }
#in4 { background-color: #444; }
#in5 { background-color: brown; }
#in6 { background-color: purple; }

/* initially scale all .inner divs up while they're transparent */
.scaleUp {
  transform: scale(1.3, 1.3);
}
/* on each click we scale down to original size, set opacity to 1 with transition */
.scaleDown {
  transform: scale(1, 1);
  opacity: 1;
  transition: all 0.5s ease-in;
}

@media screen and (max-width: 650px){
  #outer{
    width: 455px;
    /* We scale it up just a bit to add the required effect using below lines */
    transform: scale(1.05, 1.05);
    transition: transform 0.5s ease-in-out;
  }
  .left, .right{
    width: calc(100% - 5px);
    margin:0 auto;
    float:none;
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="outer">
  <div class="left">

    <div class="inner" id="in1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae eius.
    </div>
    <div class="inner" id="in2">
      Molestias quisquam iusto alias asperiores est non explicabo esse, nisi mollitia. Accusamus nisi, numquam provident eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure autem maxime accusantium explicabo, ducimus nam laborum praesentium
      assumenda deserunt! Placeat eaque distinctio deserunt sapiente minima aliquam et quae veritatis possimus?
    </div>
    <div class="inner" id="in3">
      Nostrum quae cum eius fugiat, repudiandae consectetur, nulla maxime quasi dolor voluptates voluptatem.
    </div>
  </div>
  <div class="right">
    <div class="inner" id="in4">
      Molestias quisquam iusto alias asperiores est non explicabo esse, nisi mollitia. Accusamus nisi, numquam provident eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure autem maxime accusantium explicabo, ducimus nam laborum praesentium
      assumenda deserunt! Placeat eaque distinctio deserunt sapiente minima aliquam et quae veritatis possimus?
    </div>
    <div class="inner" id="in5">
      Nostrum quae cum eius fugiat, repudiandae consectetur, nulla maxime quasi dolor voluptates voluptatem.
    </div>
     <div class="inner" id="in6">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae eius.
    </div>
  </div>
</div>

如何缩放保持比率的显示内容

1 个答案: