Akainu Lionheart Akainu Lionheart - 4 years ago 99
HTML Question

How to scale content for displays keeping the ratio

I am building a Comic publishing site. While designing the comic reader page I am so stuck at UX. I think I have to display comics by reader's display size.

Lately I saw the page of Comic for Champion called Poppy from League of legends you can check it here. This page gave me so much inspiration. As you can see this page is responsive and animated by using CSS

transform: scale()
. I want to use this but can't find any tutorial on google. Can you guys show me some example for how to achive this?

Answer Source

Updated: This JS Fiddle-Updated simulates that comic page in the example but in simpler way.

The javascript code contains comments lines to explain how it works, for the CSS most of the code lines are self-explained, most importantly these lines for the #outer div to mimic the transition on window re-size:

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

and inside the media query

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

and for all .inner divs we scale them up using .scaleUp class while they're transparent, and then on each click we add .scaleDown class to the corresponding item to transitionally scale it back to its original size as well as setting its opacity to 1:

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

It is also important that in javascript that the value of xWidth should be 1px higher than the break-point defined in the CSS media query.


Full Code:

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download