CODEWITHSUNDEEP
javascriptcsscss-transforms
theoractus
theoractus

Reputation: 21

Zoom container with div using transform translate and scale

I would like to zoom a container with divs on click, using only css transform and scale. The problem is, that it works only on first click, on second, third... my divs are translating strange. For me very thing important is to scale background.

		var scale =0.5;
        var interval = 5;
        var line_weight =1;
     $('document').ready(function(){
            $('#container').click(function(){               

            $('.test').each(function(i){

                var position = $(this).position();
                var positionL=position.left;
                var positionT=position.top;
                
                var positionTscale=positionT*scale;
                var positionLscale=positionL*scale;
                
                var translateX = -(positionL-positionLscale)*(1/scale);
                var translateY = -(positionT-positionTscale) *(1/scale);
                
                $(this).css( 'transform', 'scale('+ scale +')' + ' translate('+ translateX + 'px'+','+ translateY +'px )' ); 
            });
            
           $(".test").css('background', 'repeating-linear-gradient(0deg, #000, #000' + line_weight/scale+ ' #ffffff 0, #ffffff ' + scale*interval+ 'px');
           $(".test").css('border-right', (line_weight) +'px solid');


          });
          
        

        $('#container').dblclick(function(){
                $(".test").css('transform', 'scale(1.0)');
                $(".test").css('background', 'repeating-linear-gradient(0deg, #000, #000' +line_weight+' , #ffffff 0, #ffffff ' + interval + 'px');
                $(".test").css('border-right', line_weight+'px solid');
          });

      }); 

     </script>   
body{
                width: 19200px;
                height: 10750px;
            }


             .test{
                height: 200px;
                width: 160px;
                display: inline-block;
                border-right: 1px solid;
                background: repeating-linear-gradient(0deg, #000, #000 1px, #ffffff 0, #ffffff 5px);

             }


             #container{
                width: 340px;
                height: 400px;

             }

             .column{
                display: inline-block;
             }
        <script src="jquery-3.0.0.min.js"></script>
   

        
<body> 

    <div id="container">
            <div>
                <div class="test" >
                    <p class="click">test1</p>
                </div> 
                <div class="test" >
                    <p class="click">test2</p>
                </div>
            </div>

            <div>
                <div class="test">
                    <p class="click">test3</p>
                </div> 
                <div class="test">
                    <p class="click">test4</p>
                </div> 
            </div> 
    </div>
</body>

Code on jsfiiddle

Upvotes: 2

Views: 1863

Answers (1)

Olga Lisovskaya
Olga Lisovskaya

Reputation: 61

What you need is just change the value in transform: scale(value). I added two buttons for the example for you to zoom in and zoom out:

<p class="zoom _bigger">
    zoom++
</p>
<p class="zoom _smaller">
    zoom--
</p>

And here is all js to solve your problem:

$('document').ready(function(){
  // We set value as 2, because further we will zoom with a half
  var zoomValue = 2;

  $('.zoom').on('click', function(){               
    if ($(this).hasClass('_bigger')) {
      zoomValue++;
    } else if (zoomValue > 2) {
      zoomValue--;
    } else {
      return false;
    }            
      $('#container').css('transform', 'scale(' + zoomValue * 0.5 + ')');
    });
});

I used a half value for zooming, and you can play with it and set what you wish.

You can check out my example on jsfiddle.

Upvotes: 1

Related Questions