Zoom the screen/image in vanilla JavaScript to the pointer click

Question

I'm creating a mindmap of products.

The user needs to click the bubble, and the screen/image should zoom in that place.

Meanwhile to zooming occurs, I want to show the user the product info in details. It needs to fade in a new image on top, and then 1s later the product info.

How can I achieve this with Vanilla JS?

How can I have a zoom in like effect to the place where the user clicked? Following by showing him a new image and the product list. When the user clicks back, the animation should zoom out from the product, and start showing the other image.

Answer 1

Somehow managed to do it using jquery , But it is not upto the mark! So, please excuse me for this and this might help you implement on your own!

Demo here

Thank you

  $('.back').hide(); $(document).on('click', function(e) { var scale = 1; var xLast = 0; var yLast = 0; var xAxis = 0; var yAxis = 0; $('#item').click(function(e, delta){ var xScreen = e.pageX - $(this).offset().left; var yScreen = e.pageY - $(this).offset().top; xAxis = xAxis + ((xScreen - xLast) / scale); yAxis = yAxis + ((yScreen - yLast) / scale); console.log(xAxis); console.log(yAxis); if (delta > 0) { scale *= 2; } else { scale /= 2; } scale = scale < 1 ? 1 : (scale > 64 ? 64 : scale); var xNew = (xScreen - xAxis) / scale; var yNew = (yScreen - yAxis) / scale; xLast = xScreen; yLast = yScreen; $("#item").css('transform', 'scale(2)' + 'translate(' + xNew + 'px, ' + yNew + 'px' + ')').css('transform-origin',+ xAxis + 'px ' + yAxis + 'px'); $('.back').show(); return false; }); }); 

 #item{ background:url("http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg"); width:100vw; height:100vh; transition:0.4s all; } span{ background-color:red; width:30px; height:30px; position:absolute; border-radius:50%; } #point1{ top:200px; left:90px; } #point2{ top:400px; left:300px; } .back { width:40px; height:10px; background-color:yellow; position:fixed; top:30px; left:30px; position:fixed; } 

  <script src="https://code.jquery.com/jquery-3.1.0.js"></script><div id="container"> <div class="back"></div> <div id="item"> <span id="point1"></span> <span id="point2"></span> </div>