JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<div class="example1">
    <div>before example 1</div>
    <!-- overall scalable -->
    <div class="overall-scalable">
        <!-- scalable area -->
        <div class="scalable" scalex='0.4' scaley='0.8'>
            <div>Aenean consequat molestie dolor. Vivamus porttitor justo justo. Donec pharetra euismod molestie. Mauris vestibulum libero eu tellus rutrum tempor. </div>
            <div>Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin.</div>
        </div>
    </div>
    <div>after example 1</div>
</div>

<div class="example2">
    <div class="before">before example 2</div>
    <!-- overall scalable -->
    <div class="overall-scalable">
        <!-- scalable area -->
        <div class="scalable" scalex='0.5' scaley='0.5'>
            Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin. Nullam id lobortis dolor. Nulla vitae nibh vitae sem volutpat pretium. Nunc et nisi ante. Integer in blandit nisi. Nulla facilisi. Vestibulum vulputate sapien eget mauris elementum sollicitudin. Nullam id lobortis dolor. Nulla vitae nibh vitae sem volutpat pretium.
        </div>
    </div>
    <div class="after">after example 2</div>
    <div style="clear: both;"></div>
</div>

<button>Shrink</button>

CSS

/* styles for example purposes only */
.example1 {border-bottom: 1px solid #ccc;}
.example2 .before {float: left;}
.example2 .overall-scalable {float: left;}
.example2 .after {float: left;}

/* styles for scalable */
.overall-scalable {width: 350px; height: 150px; overflow: hidden; -webkit-transition: all 1s;}
.scalable {color: #666; width: 350px; height: 150px; -webkit-transform-origin: top left; -webkit-transition: all 1s;}

JavaScript

$('button').click(function() {
    $('.scalable').each(function(){
        rescale($(this));
    })
});

function rescale(elem) {
    
    var height = parseInt(elem.css('height'));
    var width = parseInt(elem.css('width'));
    var scalex = parseFloat(elem.attr('scalex'));
    var scaley = parseFloat(elem.attr('scaley'));
    
    if (!elem.hasClass('rescaled')){
        var ratioX = scalex;
        var ratioY = scaley;
    }else{          
        var ratioX = 1;
        var ratioY = 1;
    }
    
    elem.toggleClass('rescaled');
    elem.css('-webkit-transform', 'scale('+ratioX +', '+ratioY+')');        
    elem.parent().css('width', parseInt(width*ratioX) + 'px');
    elem.parent().css('height', parseInt(height*ratioY) + 'px');
}