Увеличить экран / изображение в ванильном JavaScript до щелчка указателя

Question

Я создаю карту мыслей о продуктах.

Пользователь должен щелкнуть пузырь, и экран / изображение должны увеличить это место.

Между тем, чтобы происходит увеличение, я хочу показать пользователю информацию о продукте в деталях.Это должно исчезнуть в новом изображении сверху, а затем через 1 секунду информация о продукте.

Как этого добиться с помощью Vanilla JS?

Как можно увеличить эффект, подобный тому, где находитсяпользователь нажал?Затем, показывая ему новое изображение и список продуктов.Когда пользователь нажимает кнопку назад, анимация должна уменьшиться от продукта и начать показывать другое изображение.

Answer 1

Каким-то образом удалось это сделать с помощью jquery, но это не до метки!Итак, извините меня за это, и это может помочь вам реализовать самостоятельно!

Демо здесь

Спасибо

 $('.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>